iframe父页面与子页面互相操作学习笔记（一）

最新推荐文章于 2026-03-29 02:27:52 发布

原创最新推荐文章于 2026-03-29 02:27:52 发布 · 2.4k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#iframe #function #jquery #jquery插件 #firefox

web前端开发专栏收录该内容

1 篇文章

订阅专栏

最近在研究如何操作iframe中子页面的元素及子页面中的js方法，虽然在网上已经有很多的资料，各大主流的搜索网站也有很多相关的提$('#testDiv',frameObj.document).text()问，但是由于本人未能完全理解他们的方法，异或各大神未明白写明方法，从而花费了很长时间，才最终达到了自己预期的结果。

首先说说希望实现的结果。此次研究主要要求的达到的结果是：

在父页面的js中，能够调用在子页面js中定义的函数
在父页面js中，能够获取并操作子页面的dom元素
在父页面中，可以对子页面的元素进行绑定事件

先给出本次研究的所有源码：

test.html (此为主页面)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>ViewFrame</title>
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script type="text/javascript">
            window.onload = (function(){
                //document.frames.myFrame.testIframe();
                myFrame.window.testIframe();
                // alert(myFrame.window.document.getElementById("testDiv").id);

            });
        </script>
    </head>
    <body style="margin: auto; background-color: White;">
        <div>
            <input id="hashValue" type="text"/>
            <button id="hashCommit">Commit</button>
        </div>
        <iframe id="myFrame" name="myFrame" src="test1.html#OK!" width="640" height="480" type="test"></iframe>
    </body>
</html>

test1.html （此为子页面）

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>ViewFrame</title>
        <script type="text/javascript" src="jquery-1.7.2.min.js"></script>
        <script type="text/javascript" src="jquery.pubsub.js"></script>
        <script type="text/javascript">
               function testIframe(){
                alert("This is child page function.");
            }
        </script>
    </head>
    <body style="margin: auto; background-color: White;">
        <div id="testDiv">This is a test</div>
        <div id="container" style="width:100%;height:100%;">
            <ul id="tabs">
                <li data-tab="users">
                    Users
                </li>
                <li data-tab="groups">
                    Groups
                </li>
            </ul>
            <div id="tabsContent">
                <div data-tab="users">
                    Jason,Tom,Jim and Jemmy
                </div>
                <div data-tab="groups">
                    G1,G2,G3 and G4.
                </div>
            </div>
        </div>
    </body>
</html>

pubsub.js源代码：

/* jQuery Tiny Pub/Sub - v0.7 - 10/27/2011
 * http://benalman.com/
 * Copyright (c) 2011 "Cowboy" Ben Alman; Licensed MIT, GPL */

(function($) {

  var o = $({});

  $.subscribe = function() {
    o.on.apply(o, arguments);
  };

  $.unsubscribe = function() {
    o.off.apply(o, arguments);
  };

  $.publish = function() {
    o.trigger.apply(o, arguments);
  };

}(jQuery));

以上为主要的实验代码，但是后面有所改变，会具体说明，以及改变的原因。

首先说说父页面访问子页面的js方法，例如在test.html页面中有一个id为myFrame的iframe，子页面定义了一个名为testFrame的函数，则在js中的操作“myFrame.window.testFrame();”，这样就可以调用子页面的testFrame方法。这种写法在ie6、ie7、ie8、ie9中均可运行，在chrome、Opera、Safari 5.7.1中也可运行，但是在firefox中运行出错，主要是由于firefox不识别myFrame.window的用法，所以对以上代码进行了修改，代码如下：

		var frameObj = null;
                if(!myFrame.window){
                    //- Compatible with firefox
                    frameObj = myFrame.contentWindow;
                }
                else{
                    frameObj = myFrame.window;
                }
		frameObj.testFrame();

也可以使用document.frames["myFrame"].window.testFrame()，此方法也可以；jquery可以用$("#myFrame")[0].window.testFrame()。

以上写法是正确的，但是由于是两个本地文件，在浏览器中是以file开头的地址，所以在chrome浏览器中被认为是跨域访问，从而无法执行，替换成一个服务器网页就OK了。

其次说说操作子页面的dom元素，我采用的是jquery的技术，具体写法是：

$('#testDiv',frameObj.document).text()

即获取子页面中id为testDiv的元素的内容。也可以写成$('#myFrame').contents().find("#testDiv").text()

最后，说说对子页面元素进行绑定事件：

$('#commit',frameObj.document).click(function(){
      alert($('#testDiv',frameObj.document).text());
});

以上基本上是本次研究的主要内容。

附录：

上面提到过pubsub.js的文件，该文件是进行事件注册和调用的一个jquery插件，个人认为比较好用，例如上面提到的click事件，我可以在js加载的时候运行$.subscribe(name,callback);，这样就可以注册一个事件，name是事件的名称，callback是事件的回调函数。注册完事件后，你可以在任何一个地方通过$.publish(name);来用刚刚注册的事件，name是刚刚注册的事件的名称。具体方法参照网站：https://gist.github.com/661855