是否可以在父帧中加载Mootools，然后在iFrame中重新使用？
范例 --开始：index.html--是否可以在父帧中加载Mootools，然后在iFrame中重新使用？,iframe,mootools,Iframe,Mootools,范例 --开始：index.html-- 索引 废话 --end:index.html-- --开始：iframe.html-- iFrame $（'inputField'）。设置（'value'，'updated text'） --end:iframe.html-- 当前，$（'inputField'）。设置（'value'，'Update text'）；不起作用：-\不，iframe.html是一个独立的页面。它不会“继承”上一页的任何内容。是的，假设
索引废话--end:index.html--
--开始：iframe.html--
iFrame$（'inputField'）。设置（'value'，'updated text'）
--end:iframe.html--
当前，$（'inputField'）。设置（'value'，'Update text'）；不起作用：-\不，iframe.html是一个独立的页面。它不会“继承”上一页的任何内容。是的，假设iframe及其父窗口位于同一个域中，则可以在父窗口中加载Mootools脚本一次，然后以编程方式扩展iframe的窗口和文档，而不是在iframe中重新加载脚本。正如你所注意到的，这不是默认的行为，而且可能是出于一个很好的理由——我猜大多数人会告诉你，这是一个不值得的麻烦
事实上，以前是这样做的，但最终被认为是太多的黑客行为，不值得长期维护作为框架的一部分，所以他们放弃了它-这就是为什么IFrame的文档有点奇怪的原因(“IFrame方法：构造函数，创建一个IFrame HTML元素，并使用MooTools扩展其窗口和文档。”，然后在示例的右下方，“注意：IFrame的窗口和文档不会使用MooTools方法扩展。”）
因此，在iframe中使用$（..）最简单的方法就是让iframe包含Mootools脚本。如果您觉得有趣，您还可以让父窗口将Mootools脚本注入iframe的头部，例如：
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>
<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>
父母亲
var mooFrame=新的IFrame（“innerFrame”，{
src:“iframe.html”，
活动：{
加载：函数（）{
var mooEl=新元素（'脚本'{
键入：“text/javascript”，
src:“mootools.js”，
活动：{
加载：函数（）{
//通过iframe传递给mooFrame
这是pageReady（）；
}.绑定（此）
}
});
this.contentDocument.head.appendChild（moel）；
}
}
});
iframe.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>
<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>
Iframe
parent.mooFrame.pageReady=函数（）{
/*将您的iframe javascript放在这里*/
$（'iframe_element'）.set（“text”，“Fancy！”）；
};
更新（7月29日）：我又一次玩弄了这个想法，意识到有一种相当明显但相当笨拙的方法可以将parent index.html窗口中定义的Mootools功能转移到内部iframe：只需将整个Mootools源包含到父窗口中即可（从现有脚本元素中删除src属性并添加id），并将该新元素的文本复制到新的脚本节点中，该节点被注入到iframe的头部。以这种方式在script元素中内联Mootools代码，可以访问元素的内容，而当通过src属性从外部文件加载javascript时，无法访问元素的内容
当然，只有当父窗口和iframe在同一个域上时（与上面提供的代码相同），这个概念才相关
一个明显的缺点是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>
父母亲
**将mootools-core.js的内容复制粘贴到此处**
var mooFrame=新的IFrame（“innerFrame”，{
src:“iframe.html”，
活动：{
加载：函数（）{
var mooEl=新元素（'脚本'{
id:“mootools\u iframe\u core”，
键入：“text/javascript”，
html:$（'mootools_js'）.innerHTML
});
this.contentDocument.head.appendChild（moel）；
这是pageReady（）；
}
}
});
我之前的回答提供了两种执行相关任务的可选方法（“在父框架中加载Mootools，然后在iframes中重新使用它”）。第一种方法不是“重复使用”"Mootools功能加载到父框架中，但这是在内部iframe中加载脚本的另一种方法。第二种方法只是通过将整个Mootools核心源内联到脚本元素中，然后将该元素的内容复制到iframe hea中的脚本元素中，从而在脚本上进行复制d（几乎不是最优的）
下面的方法以编程方式扩展内部iframe的窗口和文档对象。同样，假设父页面和iframe都在同一个域中
在我的（简短而简单的）测试中，在父级和iframe中加载源导致在大约130ms时传输72.1kb（以完成加载父级和iframe页面），而加载源然后扩展iframe的页面为36.8kb，加载父级和iframe大约需要85ms。（这是服务器上的gzip…未压缩/未统一核心源的文件大小约为134 kb）
对于这种方法，对mootools核心源代码进行了一些简单的添加/编辑
<script type="text/javascript" src="mootools-core-init.js"></script>
<script type="text/javascript">parent.initMootoolsCore.call(window);</script>