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

Question

关于消失的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(即大多数网页)内滚动,则只有可见的部分消失.滚动将显示已加载页面的其余部分,但如果不重新加载内容,则消失的部分不会重新显示.

视觉有助于消除任何混淆:

在图像中,iframe是红色框.里面的任何东西都是可见的,外面的东西都是隐藏的.

从左到右:

在使用其他标签之前

1. 在iframe中加载的网址

2. 加载的页面在iframe中正确滚动,并且可以查看所有内容

使用其他标签后

3. URL仍在iframe中加载,但框架(可见)内容已消失

4. 在iframe中滚动显示已加载页面的剩余内容,但如果不重新加载iframe中的URL,则消失的内容不会返回

注意:

此行为仅在Safari中测试,但任何主要浏览器问题都是一个问题.这可能是仅限Safari的修复或普遍iframe问题.

iframe 除了沙盒安全问题,魔法消失的行为是怎么回事？

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

(从这里获取树/路径图像)

Answer 1

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

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

在这里找到

尝试尽可能准确。出于测试目的，您可以引用 IFrame-body。

更多（很多）信息

我不确定什么时候重画最好。您可以在 mouseenter-handler 上测试修复情况。也许您可以通过侦听 window.onblur 和 window.onfocus 来检测选项卡切换。