Question

我正在构建一个响应式HTML小部件，我想用一个<script>代码加载它。这个装载机＆＃39;脚本旨在将两个元素加载到DOM中：<script>标记和<iframe>标记。

以下是加载器脚本的内容：

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静态加载到页面中时，一切正常。

使用单个脚本标记加载iFrame小部件

0 个答案: