How to Use MooTools Element Methods in an iFrame Element
Posted on | October 31, 2012 | No Comments
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 = '<p id="test">Test!</p>'; // 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!
Comments
Leave a Reply