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是否加载完成有两种方法：

iframe上用onload事件

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

二、跨域父子页面通信方法

如果iframe的链接是外部页面，因为安全机制就不能使用同域名下的通信方式了。

父页面向子页面传递数据

实现的技巧是利用location对象的hash值，通过它传递通信数据。

在父页面设置iframe的src后面多加个data字符串，然后在子页面中通过某种方式能即时的获取到这儿的data就可以了，例如：

在子页面中通过setInterval方法设置定时器，监听location.href的变化即可获得上面的data信息

然后子页面根据这个data信息进行相应的逻辑处理

子页面向父页面传递数据

实现技巧就是利用一个代理iframe，它嵌入到子页面中，并且和父页面必须保持是同域，

然后通过它充分利用上面第一种通信方式的实现原理就把子页面的数据传递给代理iframe，

然后由于代理的iframe和主页面是同域的，所以主页面就可以利用同域的方式获取到这些数据。

使用window.top或者window.parent.parent获取浏览器最顶层window对象的引用。

JS中iframe子页面与父页面之间通信的更多相关文章

js之iframe子页面与父页面通信
iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信父页面parent.html <html> <head& ...
嵌入式iframe子页面与父页面js通信方式
iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现 ...
iframe子页面与父页面元素的访问以及js变量的访问
1.子页面访问父页面元素 parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素 document.getEle ...
jQuery中，子页面与父页面之间的调用方法
在jQuery中, 子页面查找父页面的元素 parent.$("#元素Id") 父页面调用子页面的元素 $("#子页面iframe的Id").contents( ...
js 在iframe子页面获取父页面元素,或在父页面获取iframe子页面的元素的几种方式
用JS或jquery访问页面内的iframe,兼容IE/FF 注意:框架内的页面是不能跨域的! 假设有两个页面,在相同域下. index.html 文件内含有一个iframe: XML/HTML代码 ...
Js获取iframe子页面全局变量
项目中通过iframe内嵌了一个子页面,子页面定义了一些全局变量,父页面需要获取子页面的全局变量,做了一些测试(我的环境IE10和Firefox32.0.3),得出如下结论: IE下: window. ...
ifream子页面与父页面互调
function a1(x){ alert('父页面:' + x); } function acc(){ var frames = document.getElementById("dial ...
js中escape的用法----前端页面简单加密
escape() 方法,它用于转义不能用明文正确发送的任何字符.比如,电话号码中的空格将被转换成字符 %20,从而能够在 URL 中传递这些字符. http://localhost:8080/a?na ...
关于js中iframe 中 location.href的用法
关于js中"window.location.href"."location.href"."parent.location.href".&qu ...

随机推荐

Shell的特殊字符
# 有意义的“#”符合 echo ${PATH#*:} # 参数替换,不是一个注释 echo $(( 2#101011 )) # 进制转换,可以是任意进制,不是一个注释 “.” .字符匹配,这是作为正 ...
jq ajaxPrefilter 防止重复提交ajax
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
Proto3：编码
本文介绍protocol buffer消息二进制传输格式.在应用程序中使用protocol buffer时,你并不需要了解这些,但它对你了解protocol buffer格式如何影响你的编码消息的大小 ...
关于排序原生js实现
内外排序的区别排序可以分为两种:内排序和外排序.当数据量不算太大的时候,计算可以在内存中完成的排序称为内排序.当数据量特别大,计算的数据,需要分多次进入内存中进行计算的排序称之为外排序插入排序直 ...
NERDTree快捷键
切换工作台和目录 ctrl + w + h 光标 focus 左侧树形目录ctrl + w + l 光标 focus 右侧文件显示窗口ctrl + w + w 光标自动在左右侧窗口切换ctrl + w ...
有关终端的一些tips
reg.exe是用于操作注册表的命令,可以通过reg /?来查看所有参数,在pentest中有两个很实用的参数 reg query 读取注册表信息, reg add 添加或修改注册表内容. 设想如下场 ...
iPhone7产业链不为人知的辛酸
苹果金秋新品发布会是科技界的"春晚",年复一年地重复,难免会让人产生审美疲劳,但每逢中国教师节前后,全球的科技人士和媒体还是会不约而同地走到一起,等待苹果团队为之奉献出好的产品和 ...
ip修改成域名
将ip修改成域名,这样的话可以使程序变得更加健壮,别人不能直接看见你的ip地址. 后来总结下分享给大家.首先找到hosts文件的位置,这个文件是系统dns默认查找的文件. windows 系统:C:\ ...
android逆向---charles抓包
手机与电脑处于同一网络环境,且正确设置代理后,charles显示CONNECT失败,提示信息SSL handshake with client failed: An unknown issue occ ...

JS中iframe子页面与父页面之间通信