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

【问题标题】：Javascript - run function in iFrame after parent window has loadedJavascript - 加载父窗口后在 iFrame 中运行函数
【发布时间】：2020-11-08 09:01:15
【问题描述】：

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

我想运行 iFrame 中的函数，但我需要在加载所有父窗口并且事件侦听器将在 iframe 中之后运行它。

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

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

【问题讨论】：

标签： javascript iframe load onload

【解决方案1】：

一种方法是动态添加 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();
}

【讨论】：