html父子页面iframe双向发消息的实现示例_HTML/Xhtml_网页制作

来源:脚本之家  责任编辑:小易  

把2个iframe都放在另一个iframe(也就是相当于这两个iframe的父iframe)里,提交按钮写在这个父iframe中www.zgxue.com防采集请勿采集本网。

某天,领导提了一个需求,主页面里面嵌套iframe,父子页面双向发送消息。然后我就提了一个方案: postMessage

child.html"></iframe> </body> </html>   子页面 child.html: complete"来判断 二、跨域父子页面通信方法 如果iframe所链接的是外部页面,因为

知识理论准备:

/iframe> </body> </html> 子页面 child.html: 复制代码 代码如下:<html&g complete"来判断 二、跨域父子页面通信方法 如果iframe所链接的是外部页面,因为

postMessage方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。

首先假设父子页面的html代码如下:PageParent.html<html>  <head> &nb >我们在下面嵌入一个IFrame指向PageSon.html:</div>  <iframe i

语法:

即都是 location.host,父子页面是可以进行通信,即文章头的例子, 但当父页面显式的设置了document.domain="", iframe里面的页面必须也显式的设置document.domai

otherWindow.postMessage(message, targetOrigin, [transfer]); otherWindow:其他窗口的引用,如 iframe的contentWindow、执行window.open返回的窗口对象、或者是命名过或数值索引的window.frames。 message:将要发送到其他window的数据。 targetOrigin:指定那些窗口能接收到消息事件,其值可以是字符串 “*” 表示无限制,或者是一个URI。 transfer:是一串和message同时传递的Transferable对象,这些对象的所有权将被转移给消息的接收方,而发送方将不再保留所有权。

<p>首先假设父子页面的html代码如下:</p> <p>PageParent.html</p> 我们在下面嵌入一个IFrame指向PageSon.html:&lt;/div&gt; &lt;iframe id

postMessage方法被调用时,会在所有页面脚本执行完毕之后像目标窗口派发一个 MessageEvent 消息,该MessageEvent消息有四个属性需要注意: type:表示该message的类型 data:为 postMessage 的第一个参数 origin:表示调用postMessage方法窗口的源 source:记录调用postMessage方法的窗口对象

使用iframe的时候,可能会涉及到父子窗口之间传值和方法的相互调用,之前一直有些迷糊 只需传入一个参数拼接之后就可以饿了。 同样,子页面调用父页面的元素,可以使用如下

操作流程如下:

12在子页面写(前提是父子页面同域);parent.functionName(childParam);

1.准备两个页面 http://a.com/main.html 主页面 http://b.com/iframepage.html 嵌套页面

如果父子页面不跨域,按如下方式解决;如果跨域,无解 <a href="javascript:;&quo >链接</a> <iframe id="subiframe" src="index2.html" sty

main.html

  1、iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了。比如调用a()函数,就写成: window.parent.a(); 子页面取父页面中的标签中

<!DOCTYPE html> <html><head><meta charset="utf-8"><title>iframe+postMessage 跨域通信 主页面</title></head><body> <h1>主页面</h1> <iframe id="child" src="http://b.com/iframepage.html"></iframe> <div> <h2>主页面接收消息区域</h2> <span id="message"></span> </div></body> </html>

并且这个iframe的domain为 static.abc.com。那么可以通过设置父页面的domain为abc.com,子页面的domain也为abc.com,然后实现父子页面通讯(我这里有点混淆父子页面和跨

iframepage.html

你可以在A,jsp页面中写个方法譬如 closeWin = function(){winB.hide();} 然后再B.jsp中winC.show()后加段代码parent.closeWin();就可以了。前提是Window中的html是iframe。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>iframe+postMessage跨域通信 子页面</title></head><body> <h2>子页面</h2> <div> <h3>接收消息区域</h3> <span id="message"></span> </div></body></html>

t; scrolling="no"></iframe> </div> <!-- 右侧iframe结束 --> 二: index.html的body部分中添加屏蔽层和内容展示层 <!--弹出的登录页面层--&g

2、父向子发送消息

html页面之间有没有父子关系? 没有的话。就直接在url中附加参数,在另一个页面js中使用:location.search获取参数部份后再进行处理 有的话就使用父子窗口的操作方法[ifram

main.html

  1、iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了。比如调用a()函数,就写成: window.parent.a(); 子页面取父页面中的标签中

<script> window.onload = function(){ document.getElementById('child') .contentWindow.postMessage("主页面消息", "http://b.com/iframepage.html") }</script>

ad2" id="iframeX" src=test.asp?type=2> 你在tese.asp中 request.querystring("type") 就能得到传进来的值,从而判断是哪一个iframe调用的页面

注意:

一定是页面加载完成后在发送消息,否则会因为 iframe 未加载完成报错。

Failed to execute ‘postMessage’ on ‘DOMWindow’

子页面接收消息:

iframepage.html

你可以在A,jsp页面中写个方法譬如 closeWin = function(){winB.hide();} 然后再B.jsp中winC.show()后加段代码parent.closeWin();就可以了。前提是Window中的html是iframe。

<script> window.addEventListener('message',function(event){ console.log(event); document.getElementById('message').innerHTML = "收到" + event.origin + "消息:" + event.data; }, false);</script>

此时可看到页面中,iframe的子页面中打印了

收到http://a.com消息:主页面消息`

以及控制台打印了MessageEvent对象。

3、子向父发送消息

子页收到消息后回复父页面

iframepage.html

你可以在A,jsp页面中写个方法譬如 closeWin = function(){winB.hide();} 然后再B.jsp中winC.show()后加段代码parent.closeWin();就可以了。前提是Window中的html是iframe。

<script> window.addEventListener('message',function(event){ console.log(event); document.getElementById('message').innerHTML = "收到" + event.origin + "消息:" + event.data; top.postMessage("子页面消息收到", 'http://a.com/main.html') }, false);</script>

父页面收到消息并显示:

window.addEventListener('message', function(event){ document.getElementById('message').innerHTML = "收到" + event.origin + "消息:" + event.data;}, false);

4、完整代码

main.html

  1、iframe子页面调用 父页面js函数 子页面调用父页面函数只需要写上window.praent就可以了。比如调用a()函数,就写成: window.parent.a(); 子页面取父页面中的标签中

<!DOCTYPE html><html><head><meta charset="utf-8"><title>iframe+postMessage 跨域通信 主页面</title></head><body> <h1>主页面</h1> <iframe id="child" src="http://b.com/iframepage.html"></iframe> <div> <h2>主页面接收消息区域</h2> <span id="message"></span> </div></body> <script> window.onload = function(){ document.getElementById('child') .contentWindow.postMessage("主页面消息", "http://b.com/iframepage.html") } window.addEventListener('message', function(event){ document.getElementById('message').innerHTML = "收到" + event.origin + "消息:" + event.data; }, false);</script></html>

iframepage.html

你可以在A,jsp页面中写个方法譬如 closeWin = function(){winB.hide();} 然后再B.jsp中winC.show()后加段代码parent.closeWin();就可以了。前提是Window中的html是iframe。

<!DOCTYPE html><html><head><meta charset="utf-8"><title>iframe+postMessage跨域通信 子页面</title></head><body> <h2>子页面</h2> <div> <h3>接收消息区域</h3> <span id="message"></span> </div></body><script> window.addEventListener('message',function(event){ if(window.parent !== event.source){return} console.log(event); document.getElementById('message').innerHTML = "收到" + event.origin + "消息:" + event.data; top.postMessage("子页面消息收到", 'http://a.com/main.html') }, false);</script></html>

到此这篇关于html父子页面iframe双向发消息的实现示例的文章就介绍到这了,更多相关html父子页面iframe双向发消息内容请搜索真格学网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持真格学网!

jquery只能访问当前页面的IFRAME,访问另一个页面只能传值过去内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • html阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法
  • html中iframe标签的两个用法介绍
  • html悬浮框架的设置使用示例(iframe加载html)
  • html5 window/iframe跨域传递消息 api介绍
  • html frame、iframe、frameset 的区别
  • html网页制作教程 谨慎使用iframe标记
  • html iframe 用法总结收藏
  • jquery 如何在一个页面访问另一个页面中的iframe
  • 一个页面里调用两个iframe 不同页面投票的表单,点击一个页面...
  • iframe子页面与父页面在同域或不同域下的js通信
  • iframe 子页面JS如何调用父页面全局变量
  • 嵌入式iframe子页面与父页面js通信的方法
  • 嵌入式iframe子页面与父页面js通信的方法
  • Extjs3.4 获取iframe中连接的子页面中的store 急急急!!!!
  • 通过伪协议解决父页面与iframe页面通信的问题
  • Extjs3.4 获取iframe中连接的子页面中的store 急急急!!!!
  • iframe的父子窗口之间的对象相互调用基本用法
  • js能否将iframe当中子页面的参数传递参数到父框架然后在父页...
  • iframe怎么用?我需要“主页面”里嵌入一个“副页面”,然后“...
  • iframe子父页面调用
  • javascript父子页面通讯实例详解
  • 请教ExtJS中关于父子孙窗口打开、关闭的问题:
  • layer的iframe层模式怎么实现子父通讯
  • 在html中如何用js获取一个另一个页面的value
  • js中调用了一个html页面,那js后面的代码,可以直接操控调用的h...
  • 怎么在iframe子窗体中获得调用该窗体的iframe信息
  • js获取iframe 然后操作--》点击iframe的document或body的时候...
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html/xhtmlhtml父子页面iframehtml阻止iframe跳转页面并使用iframe在页面内嵌微信网页版的实现方法html中iframe标签的两个用法介绍html悬浮框架的设置使用示例(iframe加载html)html5 window/iframe跨域传递消息 api介绍html frame、iframe、frameset 的区别 html网页制作教程 谨慎使用iframe标记html iframe 用法总结收藏html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧iframe标签用法详解(属性、透明、自适应高度)16进制颜色代码(完全)40多个漂亮的网页表单设计实例定义input type=file 样式的方法html中让表单input等文本框为只读不可编辑的方法html中设置锚点定位的几种常见方法html 几种特别分割线特效 html iframe 用法总结收藏html 超级链接详细讲解网页嵌入百度地图和使用百度地图api自定义地图的详细html父子页面iframe双向发消息的实现示例在html里加载摄像头的方法详解html-webpack-plugin使用html直接引用vue和element-ui的方法详解html中字体使用line-height依然不能垂直居中解决前端html换肤功能的实现代码多个html页面共同调用一段html代码的方法html中图片不存在显示默认图片的方法示例html table行距的改变方法示例html table 空白单元格补全的实现方法
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved