iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接，通信方式也不同。

一、同域下父子页面的通信

父页面parent.html

<html>

<head>

    <script type="text/javascript">

        function say(){

            alert("parent.html");

        }

        function callChild(){

            myFrame.window.say();

            myFrame.window.document.getElementById("button").value="调用结束";

        }

    </script>

</head>

<body>

    <input id="button" type="button" value="调用child.html中的函数say()" onclick="callChild()"/>

    <iframe name="myFrame" src="child.html"></iframe>

</body>

</html>

子页面child.html

<html>

<head>

    <script type="text/javascript">

        function say(){

            alert("child.html");

        }

        function callParent(){

            parent.say();

            parent.window.document.getElementById("button").value="调用结束";

        }

    </script>

</head>

<body>

    <input id="button" type="button" value="调用parent.html中的say()函数" onclick="callParent()"/>

</body>

</html>

方法调用

父页面调用子页面方法：FrameName.window.childMethod();

子页面调用父页面方法：parent.window.parentMethod();

DOM元素访问

获取到页面的window.document对象后，即可访问DOM元素

注意事项

要确保在iframe加载完成后再进行操作，如果iframe还未加载完成就开始调用里面的方法或变量，会产生错误。判断iframe是否加载完成有两种方法：

1. iframe上用onload事件

2. 用document.readyState=="complete"来判断

js父页面和子页面相互取值的更多相关文章

  1. js里父页面与子页面的相互调用

    一.在页面里用 open 打开的子页面: 1.子页面调用父页面的方法,包括子页面给父页面传值: window.opener.methodName(); window.opener.methodName ...

  2. Iframe父页面与子页面之间的相互调用

    iframe元素就是文档中的文档. window对象: 浏览器会在其打开一个HTML文档时创建一个对应的window对象.但是,如果一个文档定义了一个或者多个框架(即:包含一个或者多个frame或者i ...

  3. js父页面和子页面之间传值

    今天和朋友一块讨论,怎样通过js在父页面和子页面之间传值的问题,总结例如以下: 需求描写叙述:父页面有多个子页面.实如今父页面点击子页面,传值到子页面. 看着非常easy,试了好久.主要纠结在怎样获取 ...

  4. 父页面调用子页面js的方法

    iframe子页面调用父页面javascript函数的方法今天遇到一个iframe子页面调用父页面js函数的需求,解决起来很简单,但是在chrome浏览器遇到一点小问题.顺便写一下iframe的父页面 ...

  5. Jquery父页面和子页面的相互操作

    //父页面调用子页面Add函数 $("iframe")[0].contentWindow.Add() //父页面对子页面Id为Sava的Dom元素执行一次单击操作 $(" ...

  6. 使用layer 弹出对话框 子父页面相互参数传递 父页面获取子页面参数实例

    一.先看效果: 1.点击三个点的图标弹出了子页面: 2.子页面调用父页面方法,图一调用父页面方法,图二得到父页面var变量.           3.选择之后,关闭弹框,父页面得到子页面单选框选择的v ...

  7. JavaScript从父页面获取子页面的值（子页面又如何访问父页面）

    之前还真没做过类似的东西,,top页面获取子页面的document.. 在百度搜了下即找到这个东东,还好,能用. 主要就是使用 contentWindow方法,获取子页面的所有document,再做处 ...

  8. Js动态获取iframe子页面的高度////////////////////////zzzz

    Js动态获取iframe子页面的高度   Js动态获取iframe子页面的高度总结 问题的缘由 产品有个评论列表引用的是个iframe,高度不固定于是引发这个总结. 方法1:父级页面获取子级页面的高度 ...

  9. Iframe父页面与子页面之间的调用

    原文:Iframe父页面与子页面之间的调用 Iframe父页面与子页面之间的调用 专业词语解释如下:     Iframe:iframe元素是文档中的文档.     window对象: 浏览器会在其打 ...

随机推荐

  1. C关键字volatile总结

    做嵌入式C开发的相信都使用过一个关键字volatile,特别是做底层开发的.假设一个GPIO的数据寄存器地址是0x50000004,我们一般会定义一个这样的宏: #define GDATA *((vo ...

  2. java读取xls和xlsx数据作为数据驱动来用

    java读取Excle代码 拿来可以直接使用 :针对xls 和 xlsx package dataProvider; import java.io.File; import java.io.FileI ...

  3. 转载免安装版mysql的配置

    解压到自定义目录,我这里演示的是D:\wamp\mysql\   复制根目录下的my-default.ini,改名为my.ini,my.ini用下面内容替换 #以下是复制内容,这行可不复制 [clie ...

  4. 【计算机基础】当你在浏览器中输入Google.com并且按下回车之后发生了什么？

    本文转载自:https://github.com/skyline75489/what-happens-when-zh_CN#id9 按下"g"键 接下来的内容介绍了物理键盘和系统中 ...

  5. 51nod 1804 小C的多边形(构造)

    首先可以算出无解的充分不必要条件,所有边的和为sum=3*((n-1)*n)/2,如果sum%n!=0显然无解. 也就是说n为奇数必然无解.现在考虑n为偶数的情况. 不妨假设n为偶数有解,现在考虑如何 ...

  6. bzoj4754[JSOI2016]独特的树叶

    这个题....别人写得怎么都....那么短啊? 我怎么....WA了好几次啊....怎么去loj扒了数据才调出来啊? 这个算法...怎么我还是不知道对不对啊 怎么回事啊怎么回事啊怎么回事啊? 请无视上 ...

  7. 【bzoj5133】[CodePlus2017年12月]白金元首与独舞 并查集+矩阵树定理

    题目描述 给定一个 $n\times m$ 的方格图,每个格子有 ↑.↓.←.→,表示从该格子能够走到相邻的哪个格子.有一些格子是空着的,需要填上四者之一,需要满足:最终的方格图中,从任意一个位置出发 ...

  8. Android 分Dex (MultiDex)

    需要分Dex的理由想必大家都知道了.正是在ART以前的Android系统中,Dex文件对于方法索引是用一个short类型的数据来存放的.而short的最大值是65535,因此当项目足够大包含方法数目足 ...

  9. 关于upper、lower bound 的探讨

    lower_bound(A, A+n, x) - A  返回第一个大于等于x的数的下标 lower_bound(A, A+n, x) - A - 1 返回最后一个小于x的数的下标 upper_boun ...

  10. 程序开发常用第三方类库一览表(VendorLib)

    以下是自己开发过程中用到的第三方类库,记录下来方便查阅 ------------------------------------------------------------------------ ...