javascript - 无论如何，要在 doc.ready 事件之前将 JS 注入(inject) iframe 中？

Question

我想要实现的是:

1. 将 iframe 动态加载到页面中(同一域)
2. 在获取第一个生命周期事件(就绪、加载)之前 - 将函数注入(inject) iframe 的全局窗口范围。

我尝试了以下方法:

1. 注册 iframe document.ready 事件 - 问题是 frameElement.contentWindow 仍然 null。
2. 注册到 iframe load 事件 - 太晚了，iframe 尝试调用 future 要注入(inject)的函数。

代码:

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