Home/ Questions/Q 6201801
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-24T04:37:14+00:00

Example — begin: index.html — <!doctype html> <html> <head> <title>Index</title> <script type=text/javascript src=mootools.js></script> </head>

  • 0

Example

— begin: index.html —
<!doctype html>
<html>
<head>
<title>Index</title>
<script type="text/javascript" src="mootools.js"></script>
</head>
<body>
<iframe src="iframe.html" id="innerFrame">blah</iframe>
</body>
</html>
— end: index.html —

— begin: iframe.html —
<!doctype html>
<html>
<head>
<title>iFrame</title>
</head>
<body>
<form>
<input id="inputField" type="text" value="this is text." />
</form>
<script type="text/javascript">
$('inputField').set('value', 'updated text');
</script>
</body>
</html>
— end: iframe.html —

Currently, $(‘inputField’).set(‘value’, ‘updated text’); doesn’t work :-\

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    My previous answer offered two alternative ways of doing the task in question (“load Mootools in a parent frame and then re-use it in iframes”). The first method didn’t “re-use” the Mootools functionality loaded into the parent frame, but was rather an alternative way to load the script in the inner iframe. The second method was just a hacky way of copying over the script by putting the entire mootools core source inline in a script element and then copying that element’s content into a script element in the iframe’s head (hardly optimal).

    This following method does programatically extend the window and document objects of the inner iframe. Again, it is assumed that both the parent page and the iframe are on the same domain.

    In my (brief and simple) testing, loading the source in both parent and iframe resulted in 72.1 KB transferred at around 130ms (to finish loading both the parent and iframe pages), while the page that loaded the source and then extended the iframe was 36.8 KB and took around 85ms to load both parent and iframe. (that’s with gzip on the server…file size of uncompressed/unminified core source is around 134 kb).

    For this method a few trivial additions/edits are made to the mootools core source. Download an uncompressed version of mootools-core-1.3.2.js, and rename it to ‘mootools-core-init.js’ (or whatever). The following steps assume that you checked all boxes on the core builder page except ‘Include Compatibility’.

    Add this to the top of the ‘mootools-core-init.js’ file (above the first self-calling anonymous function): 

    var initMootoolsCore = function(){

var window = this;
var document = this.document;

    Add this to the very bottom of the core js file:

    };

initMootoolsCore.call(window);

    Do the following find/replace tasks:

    1

    • Find:})();
    • Replace: }).call(this);

    2

    • Find: if (Browser.Element) Element.prototype = Browser.Element.prototype;
    • Replace: if (this.Browser.Element) Element.prototype = this.Browser.Element.prototype;

    3

    • Find: var IFrame = new Type
    • Replace: var IFrame = this.IFrame = new Type

    4

    • Find: var Cookie = new Class
    • Replace: var Cookie = this.Cookie = new Class

    (download | compressed version)

    In your parent index.html file, put the following script element in the head

    <script type="text/javascript" src="mootools-core-init.js"></script>

    Finally, in your iframe.html file, put the following inline script element in the head to extend the iframe’s window and document (it must be before any included or inline scripts that need to use Mootools):

    <script type="text/javascript">parent.initMootoolsCore.call(window);</script>
    • 0