在加载期间隐藏iframe

Question

我想在加载过程中隐藏iframes以防止在背景颜色上出现白色矩形。

我的实际js

$( '#my_frame' )
    .css( 'visibility', 'hidden' )
    .attr( 'src', '/my_new_page.html' )
    .one( 'load', function () {
        $( this ).css( 'visibility', 'visible' )
    });

问题是在iframe我遇到onbeforeunload事件时我阻止了页面的切换，因为iframe从未触发load事件，所以它仍然是隐藏的。

我该怎么做？

PS：我试图在隐藏页面之前捕获unload事件，但是在更改src时它永远不会触发。

jsFiddle demo

Answer 1

经过一些尝试后，我找到了一种工作方法：

$frame
  .load( function () {
    this.style.visibility = 'visible';
    this.contentWindow.onunload = function ( e ) {
      this.window.frameElement.style.visibility = 'hidden';
    };
  });

当iframe加载时我会显示它，并且我会在其窗口附加一个隐藏iframe的卸载事件。

Answer 2

将iframe的css设置为display：none，然后执行$（document）.ready（）并更改css以显示其中的块。应该保持隐藏，直到DOM加载，然后显示它。