Question

尝试将js和CSS从父级注入到iframe。样式表和脚本已正确地附加到iframe中的文档中，但由于某些原因，只考虑了css，而不是未执行或无法识别的js。

另一个问题是，每次将某些文件加载到需要文件的iframe中时，文件似乎都不是来自缓存，而是通过网络进行请求。这是避免提高性能的方法。

进行了相同的尝试，但定义了从加载在iframe上的文档中注入文件的功能，结果相同：

window.onload = function() {
    if (parent) {
        var iframeHead = document.getElementsByTagName("head")[0];
        var stylesScrtips = parent.document.getElementsByClassName("toInsert");
        for (var i = 0; i < stylesScrtips.length; i++)
            iframeHead.appendChild(stylesScrtips[i].cloneNode(true));
    }
}

参考了不同的讨论

Injected javascript does not execute

inject a javascript function into an Iframe

https://www.sitepoint.com/community/t/iframe-call-js-file/210325/27

在父文档上，定义了以下功能：

document.getElementById('theFrame').onload = function inject(){
    var iFrameHead = window.frames["theFrame"].document.getElementsByTagName("head")[0];

    var theStyle = new Array(5);
    for (var i=0;i<theStyle.length;i++){
        theStyle[i] = document.createElement('link');
        theStyle[i].type = 'text/css';
        theStyle[i].rel = 'stylesheet';
        var styles = $("[rel='stylesheet']").map(function() {
            return this.href;
            }).toArray();
        theStyle[i].href = styles[i];
        iFrameHead.appendChild(theStyle[i]);
    }

    var theScript = new Array(6);
    for (var i=0;i<theScript.length;i++){
        theScript[i] = document.createElement('script');
        theScript[i].type = 'text/javascript';
        var scripts = $("script[src$='.js']").map(function() {
            return this.src;
            }).toArray();
        theScript[i].src = scripts[i];
        iFrameHead.appendChild(theScript[i]);
    }
}

CSS被继承，但是对于JS文件，看到错误“未捕获的ReferenceError：*未定义”。

将JavaScript注入到iframe中未执行（同一域）

0 个答案: