javascript - 加载期间隐藏 iframe

Question

我想在加载期间隐藏iframe，以防止背景颜色上出现白色矩形。

我的实际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 的卸载事件附加到它的窗口。