The problem is that, by default, Prototype library can’t access anything in the iframe.
There is some workarounds I found (e.g example) but no one provides full support for protytpe/iframes. Does anyone know a way to do that?
PS: not using iframes is not an option :)
If you want to use Prototype in different documents — and iframes are different documents — you must include the script in every document, and use the right copy to access the associated document.
The same goes for jQuery and any other framework that refers directly to document. Each instance of the library is associated with its own document object. So when you create an element from the parent script, its ownerDocument is the parent window. Try to append that element inside the iframe's document and you should get a DOMException.WRONG_DOCUMENT_ERR.
var iframe= $('myiframe');
// get window and document objects for iframe (IE compatible)
var idoc= iframe.contentDocument || iframe.contentWindow.document;
var iwin= iframe.contentWindow || iframe.contentDocument.defaultView;
Element.extend(idoc);
idoc.body.insert('<div>hello</div>'); // fail, wrong document
iwin.Element.extend(idoc); // use the copy of Prototype in the iframe's window
idoc.body.insert('<div>hello</div>'); // ok
(Note that in Firefox you won't actually get a WRONG_DOCUMENT_ERR because they deliberately fix up this error for you silently. But more complicated manipulations can quickly get you in odd, inconsistent states.)
Most JS libraries are designed to make single-document scripting easy; they hide away much of the gory detail involved in DOM manipulation, and one of the ways they do that is by eliding the document object. But this makes them less suited to cross-document scripting, where knowing which document to use is vital.
Cross-document scripting is already confusing. Using a JS framework that is not specifically designed to handle it (and I don't know of one that is) just makes life even weirder.