Javascript-在父窗口加载后在iFrame中运行函数

编程问答 2022-06-03

问题描述

是否有办法知道iframe中是否已加载父窗口？

我想运行iFrame中的一个函数，但是我需要在所有父窗口加载完毕且事件监听器位于iframe中之后运行它。

我尝试了以下操作，但是它在加载父窗口之前运行。

window.addEventListener('load',function () {
alert("It's loaded!")
});

解决方法

一种方法是动态添加iframe：

父母：

window.addEventListener('load',function () {
   var iframe = document.createElement('iframe');
   
   iframe.src = "https://www.example.com";

   document.body.appendChild(iframe);
});

iframe：

window.addEventListener('load',function () {
   alert('hello world!');
   //doSomethingUseful();
}

这样，您可以确定它们将以特定顺序加载。但是，由于它们将按顺序加载，因此页面总加载时间的增加可能会变得很明显。

或者，您可以使用this方法。如果一个页面恰好在另一页面之前完成加载，则该页面可能无法正常工作。如果您选择这种方法，则可能需要双向通信，以便在第二页加载后才能找到要加载的第一页。可能看起来像这样：

父母：

newEvent();
window.document.addEventListener('myCustomEventI',newEvent,false);

function newEvent() {
   var data = { loaded: true }
   var event = new CustomEvent('myCustomEventP',{ detail: data })
   window.parent.document.dispatchEvent(event);
}

iframe：

newEvent();
window.document.addEventListener('myCustomEventP',handleEvent,false);

function newEvent() {
   var data = { loaded: true }
   var event = new CustomEvent('myCustomEventI',{ detail: data })
   window.parent.document.dispatchEvent(event);
}

function handleEvent(e) {
  alert('both loaded!');
  //doSomethingUseful();
}
iframeiframejavascriptloadloadload