Меняйте источник iframe каждые 30 секунд.

Question

На моей веб-странице загружен фрейм.Через 30 секунд я хочу изменить источник iframe для загрузки другого сайта.Это прекрасно работает с использованием jQuery (функция setTimeout), но моя проблема заключается в производительности.При смене источника загрузка страницы в iframe занимает 15 секунд.Я застрял с пустым экраном, пока содержимое не будет загружено.Можно ли изменить источник только после загрузки страницы?Что я могу сделать в jQuery для предварительной загрузки веб-страницы?

Answer 1

Вы можете написать такой скрипт, чтобы определить, когда страница (в iframe) закончила загружаться:

// Insert iframe in the page
var $iframe = $('<iframe src="http://www.msn.com/"></iframe>').css({
    width: '1px',
    height: '1px'
}).attr('frameborder', '0').appendTo('body').data('loaded', 'no');

// Function to execute when the page (in the iframe) has finished to load,
// or when the timeout is over
function iframeIsReady() {
    if ($iframe.data('loaded') == 'no') {
        $iframe.data('loaded', 'yes').css({
            width: '800px',
            height: '800px'
        });
        alert('iframe is ready');
    }
}

// Detect when the page (in the iframe) has finished to load
$iframe.load(function ($iframe) {
    iframeIsReady();
});

// Add an optional timeout
setTimeout(function () {
    iframeIsReady();
}, 15000);

Я также добавил «тайм-аут» в 15 секунд, если загрузка страницы занимает слишком много времени.

Answer 2

У вас может быть два iframe, в одном и том же месте на странице, но один с visibility: hidden, в который вы предварительно загружаете содержимое, а затем через 30 секунд меняете их местами.Затем вы изменяете URL на ранее видимый, чтобы начать загрузку в него нового URL - и повторяете.

Answer 3

Если вы используете вызов ajax для извлечения контента, вы можете заменить старый контент новым, когда новый контент поступит, и страница не будет отображаться пустой. В зависимости от того, что вы делаете, вы можете посмотреть на функцию jQuery .load() или просто использовать вызов ajax и вставить содержимое самостоятельно.

Вам, конечно, нужно будет иметь соответствующие привилегии одного и того же происхождения, чтобы изменить внутренние компоненты iframe.