Лучший способ загрузить внешнюю страницу в текущую с помощью Webkit / jQuery - PullRequest
Новая
       35

Лучший способ загрузить внешнюю страницу в текущую с помощью Webkit / jQuery

2 голосов
/ 26 сентября 2011

Я хотел бы загрузить полную HTML-страницу в текущую, используя стандартные веб-технологии в веб-приложении для iPad (без фреймворка, такого как Sencha и т. Д.)

У меня есть страница контента и страница статьи. Я хочу загрузить страницу статьи (включая javascript / CSS для этой конкретной страницы) в новый div и анимировать переход (скольжение), но, похоже, он не работает.

Используя функцию загрузки jQuery, CSS / JS загружается не полностью и работает только в Chrome (не на iPad). Есть ли лучший способ сделать это?

CSS: 

#content-container {
}

#article-container {
position: absolute;
left: @defaultWidth;

width: 100%;
height: 100%;

background-color: @darkGreyColour;

-webkit-transition: left 1s ease-in; 
}

#content-container.animate {
left: -100%;
}

#article-container.animate {
    left: 0;
}

JS 

function animateTransition(event) {
    $('#article-container').load('/ #main', function() {
        console.log("Animating...");
        $('#content-container').addClass('animate');
        $('#article-container').addClass('animate');
    });
}

1 Ответ

1 голос
/ 27 сентября 2011

Я бы рекомендовал использовать <iframe> для загрузки полной HTML-страницы. Использование jQuery .load () для загрузки части полной HTML-страницы (например, $("#myElement").load("/index.html #main")) загружает только html в эту часть документа, поэтому он не будет загружать js / css, определенный в других частях страница статьи. Подробнее об этой проблеме можно прочитать в разделе «Загрузка фрагментов страницы» API-страницы jQuery .load .

.

Использование <iframe>: 

<iframe src="theArticle.html">
    <p>Your browser does not support iframes.</p>
</iframe>

Использование jQuery и .load () для загрузки статьи в <div>: 

function animateTransition(event) {
    // load the html contained in the tag with id of #main
    $('#article-container').load('myArticle.html #main', function() {
        // load the css
        $('head').load('myCSS.css', function() {
            // load the js
            $.getScript('myScript.js', function() {
                console.log("Animating...");
                $('#content-container').addClass('animate');
                $('#article-container').addClass('animate');
            });
        });
    });
}
...