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

| 例 -开始：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 \'）;不起作用：-\\     
2020-02-05 4 条评论
分享

没有找到相关结果

    已邀请:

    辩谷变充

            我以前的回答提供了两种解决问题的方法（“将Mootools加载到父框架中，然后在iframe中重新使用”）。第一种方法没有“重用” Mootools功能加载到父框架中，而是将脚本加载到内部iframe中的另一种方法。第二种方法只是通过将整个mootools核心源内联到一个script元素中，然后将该元素的内容复制到iframe头部的script元素中（非常不理想）来复制脚本的一种不可靠的方法。 以下方法确实以编程方式扩展了内部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 \'（或其他名称）。以下步骤假定您选中了核心构建器页面上的所有框，除了\'Include Compatibility \'。 将其添加到\'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
     （下载|压缩版） 在您的父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>
        
    2020-02-05 0 0
    分享

    辟官陡板休

    是的，假设iframe及其父窗口位于同一域中，则可以在父目录中加载Mootools脚本一次，然后以编程方式扩展iframe的窗口和文档，而不必重新加载iframe中的脚本。正如您所注意到的那样，这不是默认行为，这可能是有充分原因的-我想大多数人会告诉您，这比它的价值还大。 实际上，IFrame快捷方式元素构造函数曾经做过确切的事情，但是最终被认为是太多的hack，并且不值得长期作为框架的一部分进行维护，因此他们放弃了它-这就是为什么IFrame的文档有点奇怪（\“ IFrame方法：构造函数，创建一个IFrame HTML元素，并使用MooTools扩展其窗口和文档。\”，然后紧接在示例之后的\“注意：一个IFrame \ MooTools方法不会扩展窗口和文档。\“）。 因此，在$ 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位于同一域（与上面提供的代码相同）时，此..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>
        
    2020-02-05 0 0
    分享

    惜堡沁戚

            不，iframe.html是一个独立页面。它不会“继承”上一页中的任何内容。     
    2020-02-05 0 0
    分享
    为什么被折叠? 0 个回复被折叠

    要回复问题请先登录或注册

    或代码 OrCode.com 备案号：粤ICP备15020848号-1
    Escape time: 0.036336898803711