在同一浏览器中使用其他选项卡后 iFrame 内容消失答案

【问题标题】：iFrame content disappears after using other tabs in same browser在同一浏览器中使用其他选项卡后 iFrame 内容消失
【发布时间】：2016-06-29 15:45:34
【问题描述】：

关于 iFrame 内容消失的帖子很多，但我能找到的都是关于立即消失或随机消失的内容。

我的情况有点不同。

我在父 div 中有一个 iframe：

<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（即大多数网页）内滚动，那么只有可见部分会消失。滚动将显示加载页面的其余部分，但如果不重新加载内容，消失的部分不会重新出现。

视觉帮助消除任何混乱：

在图像中，iframe 是红色框。里面的东西都是可见的，外面的东西都是隐藏的。

从左到右：

在使用其他标签之前

在 iframe 中加载的 URL
加载的页面在 iframe 内正常滚动，所有内容都可以查看

使用其他标签后

URL 仍在 iframe 中加载，但加框（可见）内容消失了
在 iframe 内滚动会显示已加载页面的剩余内容，但如果不重新加载 iframe 中的 URL，则消失的内容不会返回

注意：

此行为仅在 Safari 中进行测试，但任何主要浏览器问题都是相同的问题。这可能是仅限 Safari 的修复，也可能是通用的 iframe 问题。

iframe 沙盒安全问题不谈，魔法消失行为是怎么回事？

一个明显的 hacky 修复是有一个刷新按钮让用户重新加载内容，但这远非理想。

（树/路径图像取自here）

【问题讨论】：

写得好完整的问题。对不起，我不知道。
会不会是 this question 之类的东西？我相信您可以使用the Page Visibility API 在您的页面可见时应用该问题的修复？我希望它与 Safari 在标签在一段时间内不活动时关闭 iframe 的呈现有关。
body {overflow-y: auto or scroll; min-height: 101vh;} ?
如果每次激活选项卡时都强制重新渲染 iframe 内容怎么办？它可能是由 css 更改强迫的，例如尝试更改父 div 和/或 iframe 或 iframe 正文内容本身的填充/边距（取决于它是否是同一个域并且您可以访问它）。
您使用的是哪个版本的 Safari？以及哪个操作系统？

标签： javascript jquery html iframe

【解决方案1】：

也许这是一个重绘/回流问题。这只是一个微弱的猜测:(

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

found here

尽量做到准确。出于测试目的，您可以参考 IFrame-body。

More (a lot) information

我不确定何时重绘最好。您可以在 mouseenter-handler 上测试修复。也许你可以通过监听 window.onblur 和 window.onfocus 来检测 tab-switch。

【讨论】：

【解决方案2】：

我很好奇这是否发生在所有浏览器中，或者只是 Safari。从事情的声音来看，它确实听起来像一个浏览器错误，而且你没有做错任何事情。也许一些 RAM 优化会导致丢失像素成为令人讨厌的副作用。

我希望有人想出更好的东西，但也许让您启动并运行的解决方法是每次用户返回标签时重新加载 iframe。不是高性能或优雅，但总体而言是用户体验。

以下代码可能有助于缓解性能消耗。

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

请注意，我从这个有用的条目中收集了“标签可见”代码：http://www.html5rocks.com/en/tutorials/pagevisibility/intro/

希望这会有所帮助！祝您工作顺利！

【讨论】：