Содержимое 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, и все содержимое можно просмотреть

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

3. URL-адрес по-прежнему загружается в iframe, но содержимое рамки (видимое) исчезло

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

Примечание:

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

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

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

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

Ответы

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

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);
    }
});