javascript在iframe间传递数据

来源：互联网发布：萤石云无网络视频编辑：程序博客网时间：2024/06/08 15:52

最近发现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函数" onclick="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()函数" onclick="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。

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

阅读全文

0 0