如何在主要内容完全加载时加载iframe

Question

我不是一个优秀的编程专家，我在主页面加载iframe时遇到了问题。

主页面和iframe不在同一个域中，但我可以修改每个域名。我的主页面由CMS（Joomla）管理，我的Iframe是一个使用ArcGIS API（版本3.7）和Dojo（版本1.9）的JavaScript应用程序。

我只想在主页完全加载时才在我的iframe中加载JavaScript代码。

这是我的iframe的JS代码：

require([
  "esri/map",
  "dojo/domReady!"], function(Map) { 
    var map = new esri.Map("mapDiv");
    ...
});

提前感谢您的帮助！ 马加莉。

Answer 1

我几乎认为，为了让您知道iframe已经完全加载，您将需要与iframe进行交互。 iframe会在完成加载后发布消息，这将是您需要捕获的点..

就基本的iframe相关事件而言，你只得到onLoad事件，这是iframe开始加载的时候，而不是加载的完成。

Answer 2

查看Javascript的postMessage功能 - 这是一个在iframe here之间来回传递消息的好例子。当您的父文档加载完毕后，您可以使用以下命令告诉iframe：

iframe = document.getElementById('content');
iframe.contentWindow.postMessage('finished_loading', 'http://remote-domain.com');

并且iframe可以使用以下方式收听：

window.addEventListener('message', doStuffOnceParentLoaded, false);

或

window.attachEvent("onmessage", doStuffOnceParentLoaded, false);

在IE中

因为标准适用于其他人。

请记住，您可能会遇到奇怪的不一致时间问题 - 如果您的iframe在父加载后完成加载，它可能无法注册以在发送之前监听该事件。