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

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

父页面 Parent.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Parent.aspx.cs" Inherits="ReSenGuang.admin.iframeDemo.Parent" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title> <script type="text/javascript">
function parentSay() {
alert("Parent.aspx------>I'm at Parent.aspx");
} function callChild()
{
//document.frames["myFrame"].window.say();//只适用于ie浏览器
myFrame.window.childSay();
myFrame.window.document.getElementById("button").value="我变了";
}
</script> </head>
<body>
<form id="form1" runat="server">
<div>
<input type="button" value="调用Child.aspx中的函数childSay()" onclick="callChild()">
<iframe name="myFrame" src="Child.aspx"></iframe>
</div>
</form>
</body>
</html>

子页面 Child.aspx

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Child.aspx.cs" Inherits="ReSenGuang.admin.iframeDemo.Child" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>无标题页</title> <script type="text/javascript">
function childSay() {
alert("Child.aspx--->I'm at Child.aspx");
}
function callParent() {
parent.parentSay();
parent.window.document.getElementsByName("myFrame")[0].style.color = "red";
}
</script> </head>
<body>
<form id="form1" runat="server">
<div>
<input id="button" type="button" value="调用Parent.aspx中的parentSay()函数" onclick="callParent()">
</div>
</form>
</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所链接的是外部页面,因为安全机制则不能使用同域名下的通信方式了。在《SNS平台与第三方APP的JS通信实现》中提供易于且具有通用性的通信方式。

父页面向子页面传递数据

实现的技巧就是利用 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
对象的引用,这样我们就能直接条用父页面中方法啦。

参考:

1.《SNS平台与第三方APP的JS通信实现》作者:Springwang。

2.iframe父子窗口间js方法调用 作者:moreorless。

3.IFrame问题汇总作者:dengwf

方法调用

如上面示例所示父页面调用子页面的方法可通过: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所链接的是外部页面,因为安全机制则不能使用同域名下的通信方式了。在《SNS平台与第三方APP的JS通信实现》中提供易于且具有通用性的通信方式。

父页面向子页面传递数据

实现的技巧就是利用 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
对象的引用,这样我们就能直接条用父页面中方法啦。

参考:

1.《SNS平台与第三方APP的JS通信实现》作者:Springwang。

2.iframe父子窗口间js方法调用 作者:moreorless。

3.IFrame问题汇总作者:dengwf

其它资料:
jquery 父窗口 子窗口 相关操作

作者:Ljhero
出处:http://ljhero.cnblogs.com/
本作品采用署名-非商业性使用 3.0协议进行许可。欢迎转载,演绎,但是必须保留本文的署名Ljhero,且不能用于商业目的。

标签: web, iframe
绿色通道:
好文要顶
关注我
收藏该文与我联系
2
0
(请您对文章做出评价)
posted @ 2011-07-09 00:37 ljhero 阅读(10828) 评论(3) 编辑 收藏
评论列表

#1楼 2012-10-22 10:40 wodemyworld

好文章,mark~

#3楼 2014-01-02 10:06 ajaxian

值得好好学习学习

发表评论

昵称:

评论内容:





嵌入式iframe子页面与父页面js通信方式的更多相关文章

  1. js之iframe子页面与父页面通信

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

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

    iframe子页面与父页面通信根据iframe中src属性是同域链接还是跨域链接,通信方式也不同. 一.同域下父子页面的通信 父页面parent.html <html> <head& ...

  3. iframe子页面与父页面元素的访问以及js变量的访问

    1.子页面访问父页面元素  parent.document.getElementById('id')和document相关的方法都可以这样用 2.父页面访问子页面元素  document.getEle ...

  4. ifream子页面与父页面互调

    function a1(x){ alert('父页面:' + x); } function acc(){ var frames = document.getElementById("dial ...

  5. 关于iframe/子窗体与父窗体的交互

    父子窗体交互方式 通过contentWindow交互 通过postMessage交互 通过contentWindow交互 主窗体内嵌的iframe或者是其通过js打开的新窗口都可以通过contentW ...

  6. html中iframe子页面与父页面元素的访问以及js变量的访问

    1.子页面访问父页面元素   parent.document.getElementById('id')和document相关的方法都可以这样用   2.父页面访问子页面元素   document.ge ...

  7. iframe子页面与父页面元素的访问以及js变量的访问[zhuan]

    https://www.cnblogs.com/Capricorn-HCL/articles/4216302.html

  8. js处理iframe中子页面与父页面里面对象的取得的解决方案

    [1]子页面取得父页面的dom对象   parent.window.$('#id').val("");   [2]父页面取得子页面的对象   $(window.frames[&qu ...

  9. iframe子页面与父页面通信

    同域下父子页面的通信 父页面: <!DOCTYPE html> <html> <head lang="en"> <meta charset ...

随机推荐

  1. pandas创建一个日期

    1.通过指定周期和频率,使用date.range()函数就可以创建日期序列. 默认情况下,范围的频率是天. 2.bdate_range()用来表示商业日期范围,不同于date_range(),它不包括 ...

  2. Java之修改文件内容:字符串逐行替换

    依赖包: <dependency> <groupId>commons-io</groupId> <artifactId>commons-io</a ...

  3. BZOJ2199[Usaco2011 Jan]奶牛议会——2-SAT+tarjan缩点

    题目描述 由于对Farmer John的领导感到极其不悦,奶牛们退出了农场,组建了奶牛议会.议会以“每头牛 都可以获得自己想要的”为原则,建立了下面的投票系统: M只到场的奶牛 (1 <= M ...

  4. hadoop MapReduce 入门

    原创播客,如需转载请注明出处.原文地址:http://www.cnblogs.com/crawl/p/7687120.html ------------------------------------ ...

  5. HS BDC HDU - 3472(混合欧拉路径)

    题意: 就是混合欧拉路径板题 解析: 欧拉路径加一条t_ ---> s_  的边就变成了欧拉回路,所以利用这一点,如果存在两个奇点,那么这两个奇点出度大的是s_,入度大的是t_,加一条t_ -- ...

  6. Codeforces Round #418 (Div. 2) B. An express train to reveries

    time limit per test 1 second memory limit per test 256 megabytes input standard input output standar ...

  7. 【ZOJ2276】Lara Croft(bfs)

    BUPT2017 wintertraining(16) #4 D ZOJ - 2276 题意 n个数字绕成环,有两个指示数字的方块,每次可以顺时针或逆时针移动其中一个,步数是它当前位置的数字a[i], ...

  8. php laravel 多条件筛选

    效果如图,点击的条件出现在已选择的地方,点击已选择的条件可以删除当前点击的条件 语言是php 框架是laravel. 一.html <div class="doctor-conditi ...

  9. 自学Linux Shell14.1-理解输入输出

    点击返回 自学Linux命令行与Shell脚本之路 14.1-理解输入输出(点击这里获得更多) 两种显示脚本输出的方法: 在显示器屏幕上显示输出 将输出重定向到文件中 1. 标准文件描述符 linux ...

  10. [hgoi#2019/2/16t1]math

    题目描述 解法 我们稍微枚举一下前面几位,可以得到这样的规律. \[X_i=\frac{1}{2^{i+1}-1}\] \[Y_i=\frac{1}{2^{2^i}-1}\] 那么要使\(xm=yn\ ...