blocks|key|3064302|text|不，iframe.html是一个独立的页面。它不会“继承”上一页的任何内容。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|3064303|entityMap^0|0^^$0|@$1|2|3|4|5|6|7|D|8|@]|9|@]|A|$]]|$1|B|3|-4|5|6|7|E|8|@]|9|@]|A|$]]]|C|$]]

No, the iframe.html is an independent page. It does not "inherit" anything from the previous page.

blocks|key|1509976|text|是的，假设iframe和它的父窗口位于同一个域中，可以在父域加载Mootools脚本一次，然后以编程方式扩展iframe的窗口和文档，而不是在iframe中重新加载脚本。正如你所注意到的，这不是默认的行为，而且可能是有充分理由的--我猜大多数人会告诉你这是比它更有价值的麻烦。|type|unstyled|depth|inlineStyleRanges|entityRanges|data|1509977|事实上，IFrame快捷元素构造函数曾经做过这样的事情，但它最终被认为是一种黑客行为，不值得作为框架长期维护的一部分，因此他们放弃了它--这就是为什么IFrame的文档有点奇怪("IFrame方法:构造器，创建IFrame+HTML元素并用MooTools扩展其窗口和文档“)，然后在下面的示例"Notes:+IFrame的窗口和文档不会用MooTools方法进行扩展”之后。|offset|length|1509978|所以，拥有$(..)的最简单的方法是在您的iframe中可以使用的只是拥有iframe，包括Mootools脚本。如果您觉得很花哨，您还可以让父窗口将Mootools脚本插入iframe的头部，例如：|1509979|index.html|style|BOLD|1509980|<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>|code-block|syntax|javascript|1509981|iframe.html|1509982|+<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>|1509983|更新(7月29日)：Mootools+I又在玩弄这个想法，并意识到有一种相当明显的方法可以将父index.html窗口中定义的index.html功能转移到内部index.html:只需将整个index.html源代码包含到父窗口中(从现有的脚本元素中删除src属性并添加一个id)，并将新的巨大元素的文本复制到新的脚本节点中，该节点将被注入到iframe的头部。以这种方式在script元素中内联Mootools代码可以让您访问元素的内容，而当通过src属性从外部文件加载javascript时，您将无法访问元素的内容。|1509984|当然，只有当父窗口和iframe位于相同的域(与上面提供的代码相同)时，this..concept才是相关的。|1509985|明显的缺点是Mootools源代码没有缓存。我不确定是否有这种方法比在父和iframe中都包含mootools更理想的用例。无论如何，将index.html文件更改为：|1509986|<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>|1509987|entityMap|0|LINK|mutability|MUTABLE|url|http://mootools.net/docs/core/Element/Element#IFrame^0|0|4|E|0|0|0|0|A|0|0|0|B|0|0|0|79|0|0|1J|0|0|2C|0|0^^$0|@$1|2|3|4|5|6|7|1A|8|@]|9|@]|A|$]]|$1|B|3|C|5|6|7|1B|8|@]|9|@$D|1C|E|1D|1|1E]]|A|$]]|$1|F|3|G|5|6|7|1F|8|@]|9|@]|A|$]]|$1|H|3|I|5|6|7|1G|8|@$D|1H|E|1I|J|K]]|9|@]|A|$]]|$1|L|3|M|5|N|7|1J|8|@]|9|@]|A|$O|P]]|$1|Q|3|R|5|6|7|1K|8|@$D|1L|E|1M|J|K]]|9|@]|A|$]]|$1|S|3|T|5|N|7|1N|8|@]|9|@]|A|$O|P]]|$1|U|3|V|5|6|7|1O|8|@$D|1P|E|1Q|J|K]]|9|@]|A|$]]|$1|W|3|X|5|6|7|1R|8|@$D|1S|E|1T|J|K]]|9|@]|A|$]]|$1|Y|3|Z|5|6|7|1U|8|@$D|1V|E|1W|J|K]]|9|@]|A|$]]|$1|10|3|11|5|N|7|1X|8|@]|9|@]|A|$O|P]]|$1|12|3|-4|5|6|7|1Y|8|@]|9|@]|A|$]]]|13|$14|$5|15|16|17|A|$18|19]]]]

Yes, assuming the iframe and it's parent window are on the same domain, it is possible to load the Mootools scripts once in the parent, and then programmatically extend the IFrame's window and document, instead of re-loading the script within the iframe. It is not the default behavior, as you've noticed, and probably for good reason - I'm guessing most people will tell you it's more trouble than it's worth.

In fact, the <a href="http://mootools.net/docs/core/Element/Element#IFrame" rel="nofollow">IFrame shortcut element constructor</a> used to do that exact thing, but it was ultimately considered to be too much of a hack and not worth the effort to maintain as part of the framework long-term, so they dropped it - this why the documentation for IFrame is kind of odd ("IFrame Method: constructor, Creates an IFrame HTML Element and extends its window and document with MooTools.", and then right below after the example, "Notes: An IFrame's window and document will not be extended with MooTools methods.").

So, the most straightforward way to have $(..) useable in your iframe is just to have the iframe include the Mootools script. If you're feeling fancy, you could also have your parent window inject the Mootools script into the iframe's HEAD, for example:

index.html

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Parent&lt;/title&gt; 
&lt;script type="text/javascript" src="mootools.js"&gt;&lt;/script&gt;
&lt;/head&gt; 
&lt;body&gt;

 &lt;iframe id="innerFrame"&gt;&lt;/iframe&gt;

&lt;script type="text/javascript"&gt;
 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);

 } 
 } 
}); 
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

iframe.html

<pre><code> &lt;html&gt;
 &lt;head&gt;
 &lt;title&gt;Iframe&lt;/title&gt; 
 &lt;/head&gt;
 &lt;body&gt;
 &lt;div id="iframe_element"&gt;&lt;/div&gt;

 &lt;script type="text/javascript"&gt;
 parent.mooFrame.pageReady = function(){

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

 };
 &lt;/script&gt;
 &lt;/body&gt;
 &lt;/html&gt;
</code></pre>

Update (July 29th): I was fooling around with this idea again and realized there's a fairly obvious though pretty ham-fisted way to transfer Mootools functionality defined in the parent index.html window to the inner iframe: simply include the entire Mootools source into the parent window (remove the src attribute from the existing script element and add an id), and copy that newly enormous element's text into the new script node that gets injected into the head of the iframe. Inlining the Mootools code in the script element in this fashion gives you access to the contents of the element, which you don't get when the javascript is loaded from an external file via the src attribute.

Of course, this..concept is only relevant if the parent window and iframe are on the same-domain, (same as the code provided above).

The obvious drawback is that the Mootools source isn't cached. I'm not sure if there's a use-case where this method would be more optimal than just including mootools in both parent and iframe. In any event, change the index.html file to this:

<pre><code>&lt;html&gt;
&lt;head&gt;
&lt;title&gt;Parent&lt;/title&gt; 
&lt;script type="text/javascript" id="mootools_js"&gt;

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

&lt;/script&gt;
&lt;/head&gt; 
&lt;body&gt;

 &lt;iframe id="innerFrame"&gt;&lt;/iframe&gt;

&lt;script type="text/javascript"&gt;
 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();


 } 
 } 
});
&lt;/script&gt;
&lt;/body&gt;
&lt;/html&gt;
</code></pre>

blocks|key|3064462|text|我之前的回答提供了两种解决问题的方法(“在父框架中加载Mootools，然后在iframes中重用它”)。第一种方法没有“重用”加载到父框架中的Mootools功能，而是将脚本加载到内部iframe中的另一种方法。第二种方法只是通过将整个mootools核心源代码内联到脚本元素中，然后将该元素的内容复制到iframe头部中的脚本元素(几乎不是最优的)，从而对脚本进行复制。|type|unstyled|depth|inlineStyleRanges|offset|length|style|BOLD|entityRanges|data|3064463|下面的方法以编程方式扩展了内部iframe的窗口和文档对象。同样，假定父页和iframe都位于相同的域中。|3064464|在我(简单而简单)的测试中，在父程序和iframe中加载源导致了大约130+my的72.1+KB传输(以完成父页和iframe页面的加载)，而加载源然后扩展iframe的页面是36.8+KB，加载父和iframe所用的时间大约为85+my。(这与server...file上的gzip有关，未压缩/无限制核心源的大小约为134+kb)。|3064465|对于这种方法，对mootools核心源进行了一些微不足道的添加/编辑。下载mootools的未压缩版本-core-1.3.2.js，并将其重命名为'mootools-core-init.js‘(或其他什么)。以下步骤假设您选中了核心构建器页面上的所有框，但“包含兼容性”除外。|3064466|将其添加到'mootools-core-init.js‘文件的顶部(在第一个自调用匿名函数之上)：|3064467|var+initMootoolsCore+=+function(){

var+window+=+this;
var+document+=+this.document;|code-block|syntax|javascript|3064468|将其添加到核心js文件的最底层：|3064469|};

initMootoolsCore.call(window);|3064470|执行以下查找/替换任务：|3064471|1|3064472|查找：})();|unordered-list-item|CODE|3064473|替换：}).call(this);|3064474|2|3064475|查找：if+(Browser.Element)+Element.prototype+=+Browser.Element.prototype;|3064476|替换：if+(this.Browser.Element)+Element.prototype+=+this.Browser.Element.prototype;|3064477|3.|3064478|查找：var+IFrame+=+new+Type|3064479|替换：var+IFrame+=+this.IFrame+=+new+Type|3064480|4.|3064481|查找：var+Cookie+=+new+Class|3064482|替换：var+Cookie+=+this.Cookie+=+new+Class|3064483|(下载+=+压缩版本)|3064484|在父index.html文件中，将以下脚本元素放入head中|3064485|<script+type="text/javascript"+src="mootools-core-init.js"></script>|3064486|最后，在文件中，将以下内联脚本元素放在头部，以扩展iframe的窗口和文档(必须在需要使用iframe.html工具的任何包含或内联脚本之前)：|3064487|<script+type="text/javascript">parent.initMootoolsCore.call(window);</script>+|3064488|entityMap|0|LINK|mutability|MUTABLE|url|http://dl.dropbox.com/u/24239603/mootools-core-init.js|http://dl.dropbox.com/u/24239603/mootools-core-init-compressed.js^0|K|V|0|0|0|1A|3|0|0|1D|0|0|0|G|0|0|0|C|0|0|3|5|0|3|E|0|0|3|1V|0|3|25|0|0|3|L|0|3|Z|0|0|3|M|0|3|10|0|1|2|0|6|4|1|0|0|T|0|0|4|1W|0|0^^$0|@$1|2|3|4|5|6|7|27|8|@$9|28|A|29|B|C]]|D|@]|E|$]]|$1|F|3|G|5|6|7|2A|8|@]|D|@]|E|$]]|$1|H|3|I|5|6|7|2B|8|@]|D|@]|E|$]]|$1|J|3|K|5|6|7|2C|8|@$9|2D|A|2E|B|C]]|D|@]|E|$]]|$1|L|3|M|5|6|7|2F|8|@$9|2G|A|2H|B|C]]|D|@]|E|$]]|$1|N|3|O|5|P|7|2I|8|@]|D|@]|E|$Q|R]]|$1|S|3|T|5|6|7|2J|8|@$9|2K|A|2L|B|C]]|D|@]|E|$]]|$1|U|3|V|5|P|7|2M|8|@]|D|@]|E|$Q|R]]|$1|W|3|X|5|6|7|2N|8|@$9|2O|A|2P|B|C]]|D|@]|E|$]]|$1|Y|3|Z|5|6|7|2Q|8|@]|D|@]|E|$]]|$1|10|3|11|5|12|7|2R|8|@$9|2S|A|2T|B|13]]|D|@]|E|$]]|$1|14|3|15|5|12|7|2U|8|@$9|2V|A|2W|B|13]]|D|@]|E|$]]|$1|16|3|17|5|6|7|2X|8|@]|D|@]|E|$]]|$1|18|3|19|5|12|7|2Y|8|@$9|2Z|A|30|B|13]]|D|@]|E|$]]|$1|1A|3|1B|5|12|7|31|8|@$9|32|A|33|B|13]]|D|@]|E|$]]|$1|1C|3|1D|5|6|7|34|8|@]|D|@]|E|$]]|$1|1E|3|1F|5|12|7|35|8|@$9|36|A|37|B|13]]|D|@]|E|$]]|$1|1G|3|1H|5|12|7|38|8|@$9|39|A|3A|B|13]]|D|@]|E|$]]|$1|1I|3|1J|5|6|7|3B|8|@]|D|@]|E|$]]|$1|1K|3|1L|5|12|7|3C|8|@$9|3D|A|3E|B|13]]|D|@]|E|$]]|$1|1M|3|1N|5|12|7|3F|8|@$9|3G|A|3H|B|13]]|D|@]|E|$]]|$1|1O|3|1P|5|6|7|3I|8|@]|D|@$9|3J|A|3K|1|3L]|$9|3M|A|3N|1|3O]]|E|$]]|$1|1Q|3|1R|5|6|7|3P|8|@$9|3Q|A|3R|B|C]]|D|@]|E|$]]|$1|1S|3|1T|5|P|7|3S|8|@]|D|@]|E|$Q|R]]|$1|1U|3|1V|5|6|7|3T|8|@$9|3U|A|3V|B|C]]|D|@]|E|$]]|$1|1W|3|1X|5|P|7|3W|8|@]|D|@]|E|$Q|R]]|$1|1Y|3|-4|5|6|7|3X|8|@]|D|@]|E|$]]]|1Z|$20|$5|21|22|23|E|$24|25]]|Z|$5|21|22|23|E|$24|26]]]]

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): 

<pre><code>var initMootoolsCore = function(){

var window = this;
var document = this.document;
</code></pre>

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

<pre><code>};

initMootoolsCore.call(window);
</code></pre>

Do the following find/replace tasks:

1

<ul>
<li>Find:<code>})();</code></li>
<li>Replace: <code>}).call(this);</code></li>
</ul>

2

<ul>
<li>Find: <code>if (Browser.Element) Element.prototype = Browser.Element.prototype;</code></li>
<li>Replace: <code>if (this.Browser.Element) Element.prototype = this.Browser.Element.prototype;</code></li>
</ul>

3

<ul>
<li>Find: <code>var IFrame = new Type</code></li>
<li>Replace: <code>var IFrame = this.IFrame = new Type</code></li>
</ul>

4

<ul>
<li>Find: <code>var Cookie = new Class</code></li>
<li>Replace: <code>var Cookie = this.Cookie = new Class</code></li>
</ul>

(<a href="http://dl.dropbox.com/u/24239603/mootools-core-init.js" rel="nofollow">download</a> | <a href="http://dl.dropbox.com/u/24239603/mootools-core-init-compressed.js" rel="nofollow">compressed version</a>)

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

<pre><code>&lt;script type="text/javascript" src="mootools-core-init.js"&gt;&lt;/script&gt;
</code></pre>

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):

<pre><code>&lt;script type="text/javascript"&gt;parent.initMootoolsCore.call(window);&lt;/script&gt; 
</code></pre>

Example

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

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

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

Is it possible to load Mootools in a parent frame and then re-use it in iframes?

翻译质量差，导致语言生硬或混乱。

没有提供实际的解决方法或示例。

解答不清晰，无法理解或解决问题。

页面排版不美观，阅读体验差。

文章

问答

视频

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

示例--开始: index.html --<!doctype html><html><head><title>Index</title><script type="text/javascript" src="mootools.js"></script></head><body><iframe src="iframe.h...

问是否可以在父框架中加载Mootools，然后在iframes中重用它？
EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以在父框架中加载Mootools，然后在iframes中重用它？EN

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问是否可以在父框架中加载Mootools，然后在iframes中重用它？
EN