javascript在iframe间传递数据_js 如何向 iframe传递参数-CSDN博客

最近发现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。

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