Question

实施例

- 开始：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>
- 结束：index.html -

- 开始：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>
- 结束：iframe.html -

目前，$（'inputField'）。set（'value'，'updated text'）;不起作用： - \

Answer 1

是的，假设iframe和它的父窗口在同一个域上，可以在父窗口中加载一次Mootools脚本，然后以编程方式扩展IFrame的窗口和文档，而不是在其中重新加载脚本iframe中。这不是默认行为，正如你所注意到的那样，并且可能是有充分理由的 - 我猜大多数人会告诉你它比它的价值更麻烦。

事实上，IFrame shortcut element constructor过去常常做到这一点，但它最终被认为是太过分了，不值得长期维护作为框架的一部分，所以他们放弃了它 - 这就是为什么IFrame的文档有点奇怪（“ IFrame方法：构造函数，创建一个IFrame HTML元素并使用MooTools扩展其窗口和文档。”，然后在示例后面的下方， “注意：使用MooTools方法不会扩展IFrame的窗口和文档。”）。

因此，在iframe中使用$（..）最简单的方法就是让iframe包含Mootools脚本。如果你感觉很花哨，你也可以让你的父窗口将Mootools脚本注入到iframe的HEAD中，例如：

<强>的index.html

<html>
<head>
<title>Parent</title>   
<script type="text/javascript" src="mootools.js"></script>
</head> 
<body>

     <iframe id="innerFrame"></iframe>

<script type="text/javascript">
 var mooFrame = new IFrame("innerFrame", {      
    src:"iframe.html",
    events: {
        load: function(){

            var mooEl = new Element('script', {
                type: 'text/javascript',
                src: "mootools.js",
                events: {
                    load: function(){
                        //passed to mooFrame by the iframe
                        this.pageReady();

                    }.bind(this)

                }
            });             

            this.contentDocument.head.appendChild(mooEl);

        }           
    }       
});   
</script>
</body>
</html>

<强> Iframe.html的

 <html>
 <head>
 <title>Iframe</title>   
 </head>
 <body>
 <div id="iframe_element"></div>

 <script type="text/javascript">
     parent.mooFrame.pageReady = function(){

         /* Put your iframe javascript in here */
     $('iframe_element').set("text", "Fancy!"); 

     };
  </script>
  </body>
  </html>

更新（7月29日）：我再次愚弄这个想法并意识到有一个相当明显但很漂亮的方法将父级index.html窗口中定义的Mootools功能转移到内部iframe：简单地将整个Mootools源包含到父窗口中（从现有脚本元素中删除src属性并添加id），并将新的巨大元素的文本复制到注入iframe头部的新脚本节点中。以这种方式在脚本元素中内联Mootools代码可以访问元素的内容，当通过src属性从外部文件加载javascript时，您无法获得该内容。

当然，只有在父窗口和iframe位于同一域时（与上面提供的代码相同），this..concept才有意义。

明显的缺点是Mootools源没有缓存。我不确定是否有一个用例，这种方法比在父和iframe中包含mootools更优化。无论如何，请将index.html文件更改为：

<html>
<head>
<title>Parent</title>   
<script type="text/javascript" id="mootools_js">

**COPY-PASTE THE CONTENTS OF mootools-core.js HERE**

</script>
</head> 
<body>

     <iframe id="innerFrame"></iframe>

<script type="text/javascript">
 var mooFrame = new IFrame("innerFrame", {      
    src:"iframe.html",             
    events: {
        load: function(){
            var mooEl = new Element('script', {
                id: 'mootools_iframe_core',
                type: 'text/javascript',
                html:  $('mootools_js').innerHTML
            });

           this.contentDocument.head.appendChild(mooEl);
           this.pageReady();


        }           
    }       
});
</script>
</body>
</html>

Answer 2

不，iframe.html是一个独立的页面。它不会“继承”上一页中的任何内容。

Answer 3

我之前的回答提供了两种替代方法来执行相关任务（“在父框架中加载Mootools，然后在iframe中重复使用”）。第一种方法没有“重用”加载到父框架中的Mootools功能，而是在内部iframe中加载脚本的另一种方法。第二种方法只是通过将整个mootools核心源内联到脚本元素中然后将该元素的内容复制到iframe头部的脚本元素（几乎不是最佳的）中来复制脚本的一种hacky方式。

以下方法以编程方式扩展内部iframe的窗口和文档对象。同样，假设父页面和iframe都在同一个域上。

在我的（简短和简单）测试中，在父和iframe中加载源导致在130ms左右传输72.1 KB（以完成加载父页面和iframe页面），同时加载源的页面然后扩展iframe为36.8 KB，花费大约85毫秒来加载父和iframe。（这与服务器上的gzip有关......未压缩/未经压缩的核心源文件大小约为134 kb。）

对于这种方法，对mootools核心源进行了一些简单的添加/编辑。下载mootools-core-1.3.2.js的 未压缩 版本，并将其重命名为'mootools-core-init.js'（或其他）。以下步骤假定您已选中核心构建器页面上的所有框，但“包含兼容性”。

将其添加到'mootools-core-init.js'文件的顶部（在第一个自调用匿名函数之上）：

var initMootoolsCore = function(){

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

将其添加到核心js文件的最底部：

};

initMootoolsCore.call(window);

执行以下查找/替换任务：

1

找到：})();
替换：}).call(this);

2

查找：if (Browser.Element) Element.prototype = Browser.Element.prototype;
替换：if (this.Browser.Element) Element.prototype = this.Browser.Element.prototype;

3

查找：var IFrame = new Type
替换：var IFrame = this.IFrame = new Type

4

查找：var Cookie = new Class
替换：var Cookie = this.Cookie = new Class

（download | compressed version）

在您的父级index.html文件中，将以下脚本元素放在头部

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

最后，在iframe.html文件中，将以下内联脚本元素放在头部以扩展iframe的窗口和文档（它必须在任何需要使用Mootools的包含或内联脚本之前）：

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

是否可以在父框架中加载Mootools然后在iframe中重复使用它？

3 个答案: