嵌入式iframe子页面与父页面js通信的方法


Posted in Javascript onJanuary 20, 2015

本文实例讲述了嵌入式iframe子页面与父页面js通信的方法。分享给大家供大家参考。具体分析如下:

iframe框架中的页面与主页面之间的通信方式根据iframe中src属性是同域链接还是跨域链接,有明显不同的通信方式,同域下的数据交换和DOM元素互访就简单的多了,而跨域的则需要一些巧妙的方式来实现通信。

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

父页面 parent.html:

<html>

<head>

<script type="text/javascript">

function say() {

alert("parent.html------>I'm at parent.html");

}

function callChild()

{

//document.frames["myFrame"].window.say();//只适用于ie浏览器

myFrame.window.say();

myFrame.window.document.getElementById("button").value="我变了";

}

</script>

</head>

<body>

<input 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--->I'm at child.html");

}

function callParent() {

parent.say();

parent.window.document.getElementsByName("myFrame")[0].style.height="100px";

}

</script>

</head>

<body>

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

</body>

</html>

方法调用

如上面示例所示父页面调用子页面的方法可通过:FrameName.window.childMethod();(这种方式兼容各种浏览器)
子页面调用父页面的方法:parent.window.parentMethod();

DOM元素访问

根据FrameName.window得到了子窗口对象之后,再访问其中的DOM元素就跟访问同一页面中的DOM元素没区别了都可以通过

document.getElementById(),document.getElementsByName()[index]
如:
parent.window.document.getElementsByName("myFrame")[0];

myFrame.window.document.getElementById("button")
其中的window都是可以省略的。

注意事项

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

1.在Iframe上用onload事件;
2.用document.readyState=="complete"来判断

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

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

父页面向子页面传递数据

实现的技巧就是利用 location 对象的 hash 值,通过它传递通信数据,我们只需要在父页面设置 iframe的 src 后面多加个#data 字符串(data就是你要传递的数据),然后在 子页面 中通过某种方式能即时的获取到这儿 data 就可以了,其实常用的一种方式就是:

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

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

子页面向父页面传递数据

实现的技巧就是利用一个代理 Iframe C,它嵌入到 子页面中,并且和父页面必须保持是同域,然后我们通过它充分利用上面第一种通信方式的实现原理就能把 子页面的数据传递给 iframeC,接下来的问题就是怎么让iframeC把数据传递给主页面A ,因为,iframeC 和主页面是同域的,所以它们之间传递数据就变得简单多了,属于同域名下的通信问题了,如前面所讨论的,在这里的可以使用一个经常使用的属性 window.top (也可以使用window.parent.parent),它返回对载入浏览器得最顶层 window 对象的引用,这样我们就能直接条用父页面中方法啦。

希望本文所述对大家的javascript程序设计有所帮助。

Javascript 相关文章推荐
详解Javascript 装载和执行
Nov 17 Javascript
node.js中的http.response.addTrailers方法使用说明
Dec 14 Javascript
jQuery多级联动下拉插件chained用法示例
Aug 20 Javascript
js实现动态显示时间效果
Mar 06 Javascript
js实现网页的两个input标签内的数值加减(示例代码)
Aug 15 Javascript
Vue.js进行查询操作的实例详解
Aug 25 Javascript
微信小程序实现下拉刷新和轮播图效果
Nov 21 Javascript
JavaScript实现多态和继承的封装操作示例
Aug 20 Javascript
iview Upload组件多个文件上传的示例代码
Sep 30 Javascript
js中位运算的运用实例分析
Dec 11 Javascript
微信小程序自定义组件传值 页面和组件相互传数据操作示例
May 05 Javascript
vue webpack重写cookie路径的方法
Jul 10 Javascript
javascript浏览器窗口之间传递数据的方法
Jan 20 #Javascript
用队列模拟jquery的动画算法实例
Jan 20 #Javascript
jQuery 处理页面的事件详解
Jan 20 #Javascript
DOM 事件流详解
Jan 20 #Javascript
jQuery链使用指南
Jan 20 #Javascript
使用jQuery管理选择结果
Jan 20 #Javascript
javascript动态修改Li节点值的方法
Jan 20 #Javascript
You might like
实用函数4
2007/11/08 PHP
很好用的PHP数据库类
2009/05/27 PHP
基于Zend的Config机制的应用分析
2013/05/02 PHP
CodeIgniter框架提示Disallowed Key Characters的解决办法
2014/04/21 PHP
php中的依赖注入实例详解
2019/08/14 PHP
JavaScript修改css样式style
2008/04/15 Javascript
JQuery困惑—包装集 DOM节点
2009/10/16 Javascript
jQuery EasyUI API 中文文档 - Parser 解析器
2011/09/29 Javascript
JS调试必备的5个debug技巧
2014/03/07 Javascript
用jquery.sortElements实现table排序
2014/05/04 Javascript
jQuery实现的网页右下角tab样式在线客服效果代码
2015/10/23 Javascript
Javascript复制实例详解
2016/01/28 Javascript
浅谈js里面的InttoStr和StrtoInt
2016/06/14 Javascript
详解nodejs 文本操作模块-fs模块(二)
2016/12/22 NodeJs
手机端转换rem适应
2017/04/01 Javascript
javaScript 逻辑运算符使用技巧整理
2017/05/03 Javascript
Babel 入门教程学习笔记
2018/06/13 Javascript
详解如何写出一个利于扩展的vue路由配置
2019/05/16 Javascript
基于layui的table插件进行复选框联动功能的实现方法
2019/09/19 Javascript
Python中的条件判断语句基础学习教程
2016/02/07 Python
使用python判断你是青少年还是老年人
2018/11/29 Python
Python 监测文件是否更新的方法
2019/06/10 Python
浅谈pytorch、cuda、python的版本对齐问题
2020/01/15 Python
3种适用于Python的疯狂秘密武器及原因解析
2020/04/29 Python
django-orm F对象的使用 按照两个字段的和,乘积排序实例
2020/05/18 Python
详解Flask前后端分离项目案例
2020/07/24 Python
详解HTML5 data-* 自定义属性
2018/01/24 HTML / CSS
Urban Outfitters英国官网:美国平价服饰品牌
2016/11/25 全球购物
英国最大的笔记本电脑直销专家:Laptops Direct
2019/07/20 全球购物
益模软件Java笔试题
2012/03/27 面试题
历史学专业毕业生求职信
2013/09/27 职场文书
青年志愿者活动总结
2014/04/26 职场文书
计算机网络专业自荐书
2014/06/09 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
公安忠诚教育心得体会
2016/01/23 职场文书
Oracle安装TNS_ADMIN环境变量设置参考
2021/11/01 Oracle