Question

我想要实现的目标是：

动态加载iframe到页面（同一个域）
在获取第一个生命周期事件（就绪，加载）之前 - 将一个函数注入iframe的全局窗口范围。

我尝试了以下内容：

注册iframe document.ready事件 - 问题仍为frameElement.contentWindow null。
注册iframe load事件 - 为时已晚，iframe会尝试将未来称为注入函数。

代码：

var element = $("#myframe");
var frameElement = element.get(0);
element.ready(function(){
      //inject function to iframe
      console.log("frame window?", frameElement.contentWindow);
      frameElement.contentWindow["my_func"] = function(){...};                                
});

关于如何实现这一目标的任何想法？

Answer 1

您可以使用HTML5窗口消息在iframe及其父窗口之间来回发送数据。

在iframe中：

window.addEventListener("message", receiveMessage, false);
function receiveMessage(event) {
    if (event.origin !== "http://yourDoamin.com") //for security
        return;
    //use somethingYouNeed by accessing event.data 
}

在加载iframe后的主页面中：

//send somethingYouNeed to the iframe    
iframe.postMessage(somethingYouNeed);

更多信息： https://developer.mozilla.org/en-US/docs/Web/API/Window/postMessage

无论如何在其doc.ready事件之前将JS注入iframe？

1 个答案: