Javascript 加载带有单个脚本标记的iFrame小部件

我正在构建一个响应性HTML小部件，我想用一个

标记加载它。此“加载程序”脚本用于将两个元素加载到DOM中：一个

标记和一个

标记

以下是加载程序脚本的内容：

var self = document.currentScript;

var script = document.createElement("script");
    script.setAttribute("language", "javascript");
    script.setAttribute("type", "text/javascript");
    script.setAttribute("src", "http://cdn.domain.com/script.js");

var iframe = document.createElement("iframe");
    iframe.src = "http://cdn.domain.com/iframe.js";
    iframe.width = "100%";
    iframe.setAttribute("id", "iframe-id");
    iframe.setAttribute("frameborder", "0");
    iframe.setAttribute("onload", "javascript:load(this);")
    iframe.setAttribute("style", "border: 0 none !important; display: block;");

self.insertAdjacentElement( "afterend", script );
script.insertAdjacentElement( "afterend", iframe );

以下是内容

http://cdn.domain.com/script.js

function load(obj) { 
    window.onresize = function(event) { 
        obj.style.height = obj.contentWindow.document.getElementById(obj).offsetHeight + 'px';
    } 
    var handler = window.onresize; 
    handler.apply(window);
}

但是，我在控制台中遇到以下错误：

script.js:3 - Uncaught SecurityError: Blocked a frame with origin "http://origin.domain.com" from accessing a frame with origin "http://cdn.domain.com". Protocols, domains, and ports must match.

---

另外，似乎没有调用

load（）

函数，该函数用于在调整窗口大小时自动获取iframe的高度。当脚本和iframe静态加载到页面中时，一切正常

看起来像是一个典型的跨域浏览器安全问题，去检查

postMessage

实现我不认为跨域浏览器安全性会阻止我在iFrame中获得div的高度如果两个页面都在同一个域上，它不会阻止你。要在域之间进行通信，请使用

postMessage