Содержимое iFrame исчезает после использования других вкладок в одном браузере

Существует много сообщений об исчезновении содержимого iFrame, но те, которые я могу найти, касаются немедленного исчезновения или случайного исчезновения содержимого.

Моя ситуация немного отличается.

У меня есть iframe внутри родительского div:

<div id="punt" contentid="123">
    <iframe id="content_frame" sandbox="allow-forms allow-popups allow-scripts allow-same-origin" src="" ></iframe>
</div>

Где iframe полностью заполняет его родительский элемент, который сам по себе является почти полным размером окна просмотра.

Содержимое iframe устанавливается через JS/JQuery:

function loadURL(url){
    $('#content_frame').attr('src', url);
}

Кроме того, eventListeners привязаны к iframe

$("#content_frame").on("load", function () {
    if(isNewURL){
        bindAndFocus();
    }
});

где

function bindAndFocus(){
    $('#content_frame').bind({
        mouseenter: function(e) {
            overiFrame = $(this).parent().attr('contentid');
        },
        mouseleave: function(e) {
            overiFrame = -1;
        }
    });
}

Когда содержимое очищается, слушатель отклоняется:

$('#content_frame').unbind('mouseenter mouseleave');

И все это прекрасно работает. URL-адрес загружается нормально, контент прокручивается и может взаимодействовать, как если бы он просматривался непосредственно в браузере. Слушатель - попытка взлома (из другого сообщения SO) при определении, когда iframe был связан с - небольшим ударом и промахом, но не проблемой.

Но тогда...

Таинственный Исчезающий Закон!?

Проблема возникает, когда вы загружаете URL-адрес в iframe, а затем некоторое время играете на других вкладках (в одном браузере). Исчезновение не мгновенно - быстрое переключение между несколькими вкладками, а затем назад не влияет. Но когда вы проводите некоторое время на другой вкладке (несколько минут или дольше), а затем возвращаетесь, содержимое частично исчезает.

Чтобы уточнить...

Если контент достаточно длинный, чтобы прокручиваться в пределах iframe (т.е. на большинстве веб-страниц), то исчезает только видимая часть. Прокрутка покажет остальную загруженную страницу, но исчезнувшая часть не будет повторно отображаться без перезагрузки содержимого.

Visual, чтобы помочь устранить любую путаницу:

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

Слева направо:

Перед использованием других вкладок

URL-адрес, загруженный внутри iframe
Загруженные страницы прокручиваются правильно в iframe, и все содержимое можно просмотреть

После использования других вкладок

URL-адрес по-прежнему загружается в iframe, но содержимое рамки (видимое) исчезло
Прокрутка в iframe показывает оставшееся содержимое загруженной страницы, но исчезнувший контент не возвращается без перезагрузки URL-адреса в iframe

Примечание:

Это поведение тестируется только в Safari, но проблема с крупным браузером все-таки проблема. Это может быть только исправление Safari или универсальная проблема iframe.

iframe Проблемы с песочницей в стороне, что происходит с магическим исчезающим актом?

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

(Изображение дерева/пути взято из здесь)

Ответ 1

Возможно, это проблема с перерисованием/перепланировкой. Его просто слабое предположение:(

a.style.display='none';
a.offsetHeight;
a.style.display='block';

найдено здесь

Попробуйте сделать максимально точным. Для целей тестирования вы можете ссылаться на тело IFrame.

Больше (много) информации

Я не уверен, когда нужно перерисовывать в лучшем случае. Вы можете проверить исправление на обработчике mouseenter. Возможно, вы можете обнаружить вкладку-переключатель, прослушивая window.onblur и window.onfocus.

Ответ 2

Мне интересно, если это происходит во всех браузерах или просто в Safari. Из звука вещей это действительно звучит как ошибка браузера, и вы ничего не делаете неправильно. Возможно, некоторые оптимизации RAM, которые оставляют недостающие пиксели в качестве неприятного побочного эффекта.

Надеюсь, что кто-то придумает что-то лучшее, но, возможно, обходным путем для запуска и запуска будет перезагрузка iframe каждый раз, когда пользователь вернется на вкладку. Не исполнитель или элагент, но UX над всеми.

Следующий код может помочь уменьшить утечку производительности.

var url = 'what.com';
var loadURL = function(url) {
  // replace with your function
  console.log(url);
}

function getHiddenProp() {
    var prefixes = ['webkit','moz','ms','o'];
    
    // if 'hidden' is natively supported just return it
    if ('hidden' in document) return 'hidden';
    
    // otherwise loop over all the known prefixes until we find one
    for (var i = 0; i < prefixes.length; i++){
        if ((prefixes[i] + 'Hidden') in document) 
            return prefixes[i] + 'Hidden';
    }

    // otherwise it not supported
    return null;
}

var isHidden = (function() {
    // I'm using an IIFE here so that getHiddenProp is only run once, when this code inits, instead of ever time the tab changes.
    var prop = getHiddenProp();
    return function() {
        if (!prop) return false;
        return document[prop];
    }
})();

document.addEventListener('visibilitychange', function(){
    if(isHidden() === false) {
        // Wrapping your function in this event listener and this if statement ensures it only runs when the user navigates back to this tab.  There may even be a more performant way of doing this, so poke around if you decide to use this.
        loadURL(url);
    }
});

Ответ 3

Сколько памяти у вашего компьютера? Iframe можно было выгрузить из памяти из-за низкой памяти, доступной для всех вкладок, и Safari считал, что iframe не имеет значения. В этом случае вы не можете много сделать (другое, что модернизирует ваш компьютер), хотя попытайтесь найти, если JQuery занимает память (это огромная библиотека) и попытаться минимизировать ваш код (используйте программу, которая удаляет пробелы и т.д.)..)