javascript - 在 iframe 内扩展 DOM 元素的原型(prototype)

Question

考虑这个 JS 代码。它基本上初始化一个 CKEditor 实例，等待 1 秒，然后运行 ​​codeToDebug

function codeToDebug(){
    setNodeListProp("attr", function customAttr(name, val){
        if(typeof val != "undefined"){
            this.setAttribute(name, val);
            return this;
        }
        else return this.getAttribute(name);
    });

    // secondary check: all elements on the current document HAVE `attr` method
    var all = document.querySelectorAll("*");
    for(var i = 0, len = all.length;i < len; i++) 
        if(!all[i].attr) // always false
            console.dir(all[i]); // never executes

    // logs undefined
    console.log(
            document.querySelector(".cke_wysiwyg_frame")
                .contentDocument
                .querySelector(".cke_editable").attr);
}

window.onload = function(){
    // Replace the <textarea id="editor1"> with a CKEditor
    // instance, using default configuration.
    CKEDITOR.editorConfig = function (config) {
        config.language = 'es';
        config.uiColor = '#F7B42C';
        config.height = 300;
        config.toolbarCanCollapse = true;

    };
    CKEDITOR.replace('editor1');
    // wait for async editor to load
    setTimeout(codeToDebug, 1000);
};

function setNodeListProp(prop, func){
    // in case of custom created array of Nodes, Array.prototype is necessary
    Array.prototype[prop] = NodeList.prototype[prop] = function() {
        var args = [].slice.call(arguments, 0);
        this.forEach(function(node) {
            func.apply(node, args);
        });
        return this;
    };

    Node.prototype[prop] = func;
}

codeToDebug方法扩展了 Node 的原型(prototype)和NodeList使用方法attr 。然后log如果 attr出现在 .cke_editable CKEditor 的 iframe 内的文本区域。令人惊讶的是，它记录了 undefined .

<小时/>

My questions:

1. Why isn't the prototype of Nodes inside an iframe extended, when I am extending it in the main document? (isn't a common global Node shared by all elements - regardless of where they are?)
2. What is the best way to extend DOM of all elements - which are present on the webpage document, in its iframes, and its further nested iframes?

<小时/>

注释:

1. 我已经阅读过 Kangax 的有关扩展 DOM 的文章(以及 Prototype 的错误)。但我的用例完全不同。我只应该支持最新版本的 Chrome 和 Opera - 都是 Webkit - 因此我不担心冲突。因此，请放心，我已经考虑了扩展原型(prototype)的风险，但这个问题与此无关。

2. 这是 HTML(由于某种原因 JSBin 或代码片段不会显示 CKEditor):<script src="https://cdn.ckeditor.com/4.5.1/standard/ckeditor.js"></script><script>..ABOVE_JS_CODE..</script><textarea name="editor1" id="editor1" rows="10" cols="80"></textarea> (我本地创建了一个index.html)

Answer 1

所以，我自己写了一个函数来解决这个问题。对于任何寻找类似解决方案的人来说可能都有好处。

(function protoExtensionWork(){
    window.updateAllValuesPerWin = function(win){       
        for(var i = 0, count = protoExtensionNames.length; i < count; i++)
            setNodeListPropPerWindow(protoExtensionNames[i], protoExtensionFunctions[i], win);
    };

    // fill this up as per your requirement
    var protoExtensionNames = [], protoExtensionFunctions = [];

    function setNodeListPropPerWindow(prop, func, win){
        // in case of custom created array of Nodes, Array.prototype is necessary
        win.Array.prototype[prop] = win.NodeList.prototype[prop] = function() {
            var args = [].slice.call(arguments, 0);
            this.forEach(function(node) {
                func.apply(node, args);
            });
            return this;
        };

        win.Node.prototype[prop] = func;    
    }
})();

这是寻找 iframe 的第二段代码:

function initiateIframeCheck(parentDoc){
    var iframes = parentDoc.querySelectorAll("iframe"),
        win, doc;

    iframes.forEach(function(iframe){       
        try{                
            doc = iframe.contentDocument;
            win = iframe.contentWindow;

            // make sure handler's not already attached
            if(!doc[UNIQ_KEY]){
                doc[UNIQ_KEY] = true;
                updateAllValuesPerWin(win);     
                setInterval(initiateIframeCheck, IFRAME_CHECK_TIMER, doc);
            }
        }catch(e){ // CORS
            //console.dir(e);               
        }
    });
}

如果有人认为自己有更好、更合适的方法来完成此任务，请发表答案。