javascript在iframe间传递数据

妖狐艹你老母 2022-06-14 08:40 515阅读 0赞

最近发现javascript方面的知识了解得太少，但是一直在做javascript方向的项目，也亏得项目不是很赶，才没有在进度方面落下来。

废话讲完。

如果有一个页面，主页面（叫html1好了）里有一个iframe（html2），但是有时候html1需要获取html2的数据或者html2获取html1的数据。

我们都知道，每个html都有一个window对象，所以我们可以通过window对象来交换两页面的数据。

父页面(html1)可以通过getElementById("ifram1").contentWindow获取子页面的window对象；

子页面可以通过window.parent获取父页面的window对象。

下面来个栗子....

father.html

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>父页面</title>
      </head>
      <body>
      <input type=button value="调用子页面中的函数childSay函数" οnclick="callChild()">
      <iframe id="myFrame" src="child.html"></iframe>
      <script type="text/javascript">
    function parentSay() {
    alert("我是父页面中的方法");
    }
    function callChild()
    {
    document.getElementById("myFrame").contentWindow.childSay();
    }
      </script>
      </body>
    </html>

child.html

<!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="utf-8">
        <title>子页面</title>
      </head>
      <body>
      <input type=button value="调用父页面中的parentSay()函数" οnclick="callParent()">
      <script type="text/javascript">
    function childSay()
    {
    alert("我是子页面的say方法");
    }
    function callParent() {
    window.parent.parentSay();
    }
      </script>
      </body>
    </html>

如果这个实例你用不是火狐的浏览器打开的，会报Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.的错。

这时，需要用火狐打开或者自己布局一个apache的服务器。

原因可参考[http://blog.csdn.net/mblhq/article/details/70946481][http_blog.csdn.net_mblhq_article_details_70946481]。

除此之外，如果两个子页面间的数据也需要通过父页面来传递。

[http_blog.csdn.net_mblhq_article_details_70946481]: http://blog.csdn.net/mblhq/article/details/70946481