How to Use MooTools Element Methods in an iFrame Element

Ever create an iFrame and wanted to use MooTools Elements methods in them, but you couldn\’t? One solution is to add a <script> element whose src attribute points to a MooTools JavaScript file. Instead of doing that, you could just use the MooTools that is loaded in the parent page!

The trick!

var iframe = new IFrame({
    src: \'javascript:\"\"\' // Workaround for HTTPs warning in IE6/7
});

// Need to inject so that iframe.contentWindow exists
iframe.inject(document.body)

var win = iframe.contentWindow,
    doc = win.document;

// Mootoolize window, document and body
Object.append(win, new Window);
Object.append(doc, new Document);
if (Browser.Element){
    var winElement = iframe.contentWindow.Element.prototype;
    for (var method in Element){ // methods from Element generics
        if (!method.test(/^[A-Z]|\\$|prototype/)){
            winElement[method] = Element.prototype[method];
        }
    }
} else {
    document.id(doc.body);
}

// Write the HTML into the document
doc.open();
doc.write(\'\');
doc.close();

// Place the markup into the iframe\'s document body
doc.body.innerHTML = \'
Test!
\';

// Check that the iframe exists, and the parapgraph is retrievable with MooTools
console.log(iframe, doc.getElement(\'#test\'), win.$(\'test\'));

Thanks to Lim Chee Aun and MooEditable – A simple web-based WYSIWYG editor, written in MooTools that he wrote. That\’s where I got this snippet!