在iframe中扩展DOM元素的原型

Question

Consider this JS code. It basically initializes a CKEditor instance, waits 1 second, then runs 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;
}

The codeToDebug method extends the prototype of Node and NodeList with a method attr . It then log s if attr is present on the .cke_editable textarea inside CKEditor's iframe. Surprisingly, it logs undefined .

---

My questions:

1. Why isn't the prototype of Node s 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?

---

Notes:

1. I've already read Kangax's article (and Prototype's bugs) with extending DOM. But my use case is entirely different. I am only supposed to support latest versions of Chrome and Opera - both Webkit - as such I am NOT worried about conflicts. So, please be assured I've taken the risks of extending the prototype in consideration, but this question is not about that.

2. Here's the HTML (for some reason JSBin or Code Snippets won't show 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> (I locally created a index.html )

Answer 1

So, I myself wrote a function to solve this problem. Could be of benefit to anyone looking for a similar solution.

(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;    
    }
})();

and this is the second piece of code for looking for iframe s:

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);               
        }
    });
}

Please anyone post an answer if they think they've a better and more apt method to achieve this task.