在Iframe中调用父子页面的js方法

说明：假设有2个页面，index.html和inner.html。其中index.html中有一个iframe，这个iframe的src指向inner.html。
我们现在要做的就是：
1.在index.html中调用inner.html上的一个js方法
2.在inner.html中调用index.html上的一个js方法

实现代码如下：

index.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>Untitled Page</title>

    <script type="text/javascript">
        function ff()
        {
         alert("this is index's js function");
        }
    </script>

</head>
<body>
    <div style="background: lightblue;">
        This is index page.
        <input type="button" value="run index's function" onclick="ff();" />
        <input type="button" value="run inner page's function" onclick='window.frames["childPage"].ff();' />
    </div>
    <iframe id="childPage" name="childPage" src="inner.html" width="100%" frameborder="0">
    </iframe>
</body>
</html>

inner.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>Untitled Page</title>
    <script type="text/javascript">
        function ff()
        {
        alert("this is inner page's js function");
        }
    </script>

</head>
<body>
    <div style="background: lightgreen;">
        This is inner page.
        <input type="button" value="run index's function" onclick='parent.window.ff();' />
        <input type="button" value="run inner page's function" onclick="ff();" />
    </div>
</body>
</html>

posted on 2013-08-14 12:18 彪悍的小黑阅读(230) 评论(0) 收藏举报