使用iframe+postMessage实现页面跨域通信的示例代码_html5教程技巧

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

frame是做框架用的iframe和frame比较相似,但是有一个根本的区别,iframe可以活动,而frame是不可活动的。换句话说,iframe可以指定其坐标位置。大部分的时候我们用iframe去模拟一些特效。例如我现在要求当前页面执行某个操作,而操作后肯定要有一个跳转的动作。但是一旦跳转,原始页面就没了,这个时候可以让iframe内部做跳转,这样页面不动,而执行的内容也完成了。如果iframe的尺寸是个0*0的,就可以模拟ajax的效果了www.zgxue.com防采集请勿采集本网。

通常情况下,对于两个不同页面的脚本,只有当执行它们的页面位于具有相同的协议(通常为https),端口号(443为https的默认值),以及主机时,这两个脚本才能相互通信。而在实际项目开发过程中,经常会利用iframe在一个父页面中嵌入另外一个子页面,或者在一个父页面中弹出另一个页面,由于同源策略的限制,父子页面之间的脚本无法实现通信,而使用postMessage方法就实现了父子页面之间的跨域信息传递。

是的 好处来说,就是对模板化的内容来说,你只需要修改iframe的内容,就可以实现调用的每一个页面内容的更改 对于用户而言,使用iframe的最直观的好处就是外部导航栏是固定的,不需要重复加载,点击的时候

语法:

至于frameset,这个东东倒是一直被所有浏览器支持,因为也是W3C的东东,个人以为,非必要,还是不要使用,因为FRAMESEET破坏了页面视觉的整体性,而IFRAME却在视觉角度给人是一体的。事实上,现在很多技术

otherWindow.postMessage(message, targetOrigin, [transfer]);

Frame对于搜索引擎来讲不友好。原因在于蜘蛛访问一个网址时所抓取的HTML是调用其他网页的HTML文件的代码,并不包含任何的文字内容,也就是说你这个网页的内容是什么根本没有让蜘蛛弄明白。

otherWindow:其他页面的引用,例如,iframe的contentWindow属性,或者执行window.open返回的窗口对象。

不要用元素属性设置宽度,你把长宽都写成css形式就好了,因为元素属性不支持百分比

message:将要传递到另一个页面的数据(可以不受限制的将数据对象安全的传送给目标窗口而无需自己序列化,原因是因为采用了结构化克隆算法)。

我前几天做的网页中用到了,优势的话比如多个页面都可以去掉用一个页面,劣势的话比如大手的话可以很清楚的看出来这是两个网页,其他的就是你需要通过样式去使他兼容主网页了

targetOrigin:通过窗口的origin属性来指定哪些窗口能接收到消息事件,其值可以是一个字符串"*"(表示无限制)或者一个Url。只有当目标窗口的协议、主机地址、端口号和targetOrigin完全匹配时,目标窗口才会收到message信息。为了防止信息泄露,通常情况下都会指定特定的url。

transfer:可选参数。

使用方法:

1.父页面:(url为http://www.b.com/main.html):

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>父页面</title></head><body> <iframe id="child" src="http://www.a.com/iframepage.html"></iframe> <script> window.onload = function(){ document.getElementById("child").contentWindow.postMessage("主页面传递的消息","http://www.a.com/iframepage.html") } window.addEventListener('message', function(event){ //父获取子传递的消息 if(event.origin == "http://www.a.com"){ //可以在这里做一些逻辑操作 } }, false) </script></body></html>

2.子页面(url为http://www.a.com/iframepage.html)

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>子页面</title></head><body> <div>这里是子页面</div> <script> window.addEventListener('message', function(event){ if(event.origin == "http://www.b.com"){ //可以在这里做一些操作 top.postMessage("子页面收到父页面传递来的消息", 'http://www.b.com/main.html')//子页面向父页面传递消息 } }, false); </script></body></html>

postMessage方法被调用时,会在所有页面脚本执行完毕之后像目标窗口派发一个 MessageEvent 消息,该MessageEvent消息有四个属性需要注意:

type:表示该message的类型

data:为postMessage的第一个参数

origin:表示调用postMessage方法窗口的源

source:记录调用postMessage方法的窗口对象

特别注意:

1.一定要等A页面嵌入的B页面加载完成之后,再进行postMessage跨域通信

2.一定要对origin做判断,去掉不是来自我们目标窗口的origin,防止来自其他origin的攻击

一、Iframe标记的使用Iframe标记,又叫浮动帧标记,你可以用它将一个HTML文档嵌入在一个HTML中显示。它不同于Frame标记最大的特征即这个标记所引用的HTML文件不是与另外的HTML文件相互独立显示,而是可以直接嵌入在一个HTML文件中,与这个HTML文件内容相互融合,成为一个整体,另外,还可以多次在一个页面内显示同一内容,而不必重复写内容,一个形象的比喻即“画中画“电视。现在我们谈一下Iframe标记的使用。Iframe标记的使用格式是:[OPTION]"frameborder="x">src:文件的路径,既可是HTML文件,也可以是文本、ASP等;width、height:"画中画"区域的宽与高;scrolling:当SRC的指定的HTML文件在指定的区域不显不完时,滚动选项,如果设置为NO,则不出现滚动条;如为Auto:则自动出现滚动条;如为Yes,则显示;FrameBorder:区域边框的宽度,为了让“画中画“与邻近的内容相融合,常设置为0。比如:com/" width="250" height="200" scrolling="no" frameborder="0"></iframe>二、父窗体与浮动帧之间的相互控制在脚本语言与对象层次中,包含Iframe的窗口我们称之为父窗体,而浮动帧则称为子窗体,弄清这两者的关系很重要,因为要在父窗体中访问子窗体或相反都必须清楚对象层次,才能通过程序来访问并控制窗体。1、在父窗体中访问并控制子窗体中的对象在父窗体中,Iframe即子窗体是document对象的一个子对象,可以直接在脚本中访问子窗体中的对象。现在就有一个问题,即,我们怎样来控制这个Iframe,这里需要讲一下Iframe对象。当我们给这个标记设置了ID 属性后,就可通过文档对象模型DOM对Iframe所含的HTML进行一系列控制。比如在example.htm里嵌入test.htm文件,并控制test.htm里一些标记对象:iframe>test.htm文件代码为:hello,my boy如我们要改变ID号为myH1的H1标记里的文字为hello,my dear,则可用:document.myH1.innerText="hello,my dear"(其中,document可省)在example.htm文件中,Iframe标记对象所指的子窗体与一般的DHTML对象模型一致,对对象访问控制方式一样,就不再赘述。2、在子窗体中访问并控制父窗体中对象在子窗体中我们可以通过其parent即父(双亲)对象来访问父窗口中的对象。如example.htm:iframe>hello,my wife如果要在frame1.htm中访问ID号为myH2中的标题文字并将之改为"hello,my friend",我们就可以这样写:parent.myH2.innerText="hello,my friend这里parent对象就代表当前窗体(example.htm所在窗体),要在子窗体中访问父窗体中的对象,无一例外都通过parent对象来进行。Iframe虽然内嵌在另一个HTML文件中,但它保持相对的独立,是一个“独立王国“哟,在单一HTML中的特性同样适用于浮动帧中。试想一下,通过Iframe标记,我们可将那些不变的内容以Iframe来表示,这样,不必重复写相同的内容,这有点象程序设计中的过程或函数,减省了多少繁琐的手工劳动!另外,至关重要的是,它使页面的修改更为可行,因为,不必因为版式的调整而修改每个页面,你只需修改一个父窗体的版式即可了内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 详解使用postmessage解决iframe跨域通信问题
  • 关于iframe跨域使用postmessage的实现
  • 使用postmessage让 iframe自适应高度的方法示例
  • 关于HTML中的的使用?
  • iframe和frame的区别一般什么情况下使用iframe?(要具体解释,还要有案列)
  • iframe怎么使用?
  • iframe和frame的区别一般什么情况下使用iframe?(要具体解释,还要有案列)
  • 管理系统一般都是使用iframe吗,用它的优势和劣势在那里
  • 管理系统一般都是使用iframe吗,用它的优势和劣势在那里
  • 为什么尽量少使用frame和iframe
  • 使用jquery 操作iframe css
  • 管理系统一般都是使用iframe吗,用它的优势和劣势在那里
  • 求:与详尽使用方法与详解!
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全主页网页制作html5iframepostmessage详解使用postmessage解决iframe跨域通信问题使用postmessage让 iframe自适应高度的方法示例html/xhtmlhtml5cssxml/xsltdreamweaver教程frontpage教程心得技巧css 如何让背景图片拉伸填充避免重复显示html5 input placeholder 颜色修改示例基于第一个phonegap(cordova)的应用详解 html5配合css3实现带提示文字的输入框(摆脱js)html5定位获取当前位置并在百度地图上显示将html5 canvas的内容保存为图片借助todataurl实现html5中如何显示视频呢 html5视频播放demo让ie支持html5的方法微信浏览器取消缓存的方法html5的存储方式sessionstorage和localstorage详解基于html5+tracking.js实现刷脸支付功能html中meta标签及keywords详解移动端h5页面根据屏幕适配的四种方案html5移动端自适应布局的实现html里显示pdf、word、xls、ppt的方法示例html5 直播疯狂点赞动画实现代码 附源码html5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷canvas 基础之图像处理的使用用canvas显示验证码的实现html5给汉字加拼音收起展开组件的实现代码
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved