html5 通信方式,(原生js页面通信)关于html5的PostMessage的用法总结
大家都知道,网页之间传递数据可以使用ajax请求来完成,今天我总结下我学习的postMessage是如何完成跨页面请求数据的呢?首先,postMessage是html5新增的一个解决跨域的一个方法。那他是如何使用的呢?这里我把一个案例分享出来把。看下面的代码:
test.html
onmessage=function(e){
e=e||event;
document.write("my name is ",e.data);
document.body.style.background = 'red';
};
1.html
window.postMessage
test接收区
var f=document.getElementById("f");
//给框架网页发送消息,然后收到之后,会传送过来。
f.οnlοad=function(){
setTimeout(function(){
f.contentWindow.postMessage("谢霆锋","http://localhost:8080");
},3000)
}
首先,它的原理是这样的。我就拿我的案例代码来说吧。
1.html里面镶嵌了一个iframe网页 框架,他就是靠这里传输数据的,等1.html加载完成之后,他会主动发给test.html 谢霆锋,然后test.html收到之后,它里面有接收消息的处理函数,他收到消息之后,立马 ,给网页返回 一段字符串,然后把自己的背景改成红色。这样就达到了网页互动的效果,可惜的是,万恶的ie6.7不支持,兼容度不高。
注意:postMessage的写法,postMessage之前写的是你要通信的window对象(也就是你要向谁通信),此时的window.parent的权限仅限于此,不能在像同域似的,进行获取父级的DOM元素,否则浏览器会报错,提示你不能进行跨域访问,我们再来看postMessage中所接收的参数,第一个参数就是你要像另外一个窗口传递的数据(只能传字符串类型),第二个参数表示目标窗口的源,协议+主机+端口号,是为了安全考虑,如果设置为“*”,则表示可以传递给任意窗口。
上面是单页面交互的,下面给个双页面交互的。其实都是一样的,不过就是 两个页面都写了监听 发送事件。
test.html
page B
send
window.addEventListener('message', function(ev) {
// if (ev.source !== window.parent) {return;}
var data = ev.data;
document.write("my name is ",data);
document.body.style.background = 'red';
}, false);
function send() {
var data = document.querySelector('#inp').value;
parent.postMessage(data, 'http://localhost:8080/'); // 若父页面的域名和指定的不一致,则postMessage失败
// parent.postMessage(data, '*'); // 触发父页面的message事件
}
1.html
window.postMessage
test接收区
page A
hello world
post message
function send() {
var data = document.querySelector('#data').value;
window.frames[0].postMessage(data, 'http://localhost:8080/'); // 触发跨域子页面的messag事件
}
window.addEventListener('message', function(messageEvent) {
var data = messageEvent.data;
console.info('message from child:', data);
document.write("收到了数据: ",data);
document.body.style.background = 'red';
}, false);
————————————————
版权声明:本文为CSDN博主「衣服架子」的原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接及本声明。
原文链接:https://blog.csdn.net/huijiaaa1/java/article/details/80952315
html5 通信方式,(原生js页面通信)关于html5的PostMessage的用法总结相关推荐
- location.hash 原生js页面跳转/路由
使用vue开发项目非常方便,vue全家桶让你想实现什么功能都更加便捷,但是使用原生js,jquery开发,页面之间跳转怎么实现呢, 下面说一下window.location.hash,概念性的东西大家 ...
- 利用HTML5 LocalStorage实现跨页面通信channel
引言 随着Web技术的发展,涌出了越来越多的复杂的应用.诸多Web应用逐渐向增强用户体验方向发展.在诸如付款.在线聊天等场景中,有时需要多页面进行数据通信.以前的实现方法有cookie.服务器中转.F ...
- html5支持原生js,HTML5怎么学原生的js?让你对前端有了新的认识
原标题:HTML5怎么学原生的js?让你对前端有了新的认识 已经学习了HTML5两个月,第一个月主要学习HTML和CSS,第二个月学完了原生的js,学完原生的js后对前端有了新的认识,了解了前端并不是 ...
- modernizr 支持html5,使用modernizr.js检测浏览器对html5以及css3的支持情况
使用modernizr.js检测浏览器对html5和css3的支持情况 1.modernizr 是什么? modernize 是一个js库----一个用于检测当前浏览器对html5&css3 ...
- html原生上传,一个基于HTML5及原生JS的文件上传组件--JohnUploader
运行效果图 一.组件介绍 基本特点 基于HTML5的FileReader和FormData 可以完成多文件选择,并预览 完成文件的异步上传 原生XHR对象,适配多浏览器 代码 class JohnUp ...
- js 原生跨页面通信_DOM操作是跨线程的你知道吗?
在JS世界里面浏览器有两个重要的功能,分为渲染引擎和JS引擎.渲染引擎专门负责渲染Html和css的,JS引擎是专门用来执行JS的.这两个引擎是在不同的线程里面,它们都自己做着自己的事情,互不打扰. ...
- html5怎么制作app页面,玩转HTML5移动APP页面(动效篇)
作为一名前端,在拿到设计稿时你有两种选择: 加上高级大气上档次狂拽炫酷屌炸天的动画让页面动起来 作为一个有志向的前端,当然是选2啦!可是需求时间又很短很短,怎么办呢? 这次就来谈谈一些动画设计的小技巧 ...
- html5美食与茶页面,内容二 - html5茶艺食品网站模板
易通企业网站系统是九州易通科技开发的中国首套免费提供模板的营销型企业网站管理系统,系统前台生成html.完全符合SEO.同时有在线客服.潜在客户跟踪.便捷的企业网站管理.搜索引擎推广等功能. 九州易通 ...
- 原生js—classList.add()、classList.remove()、classList.contains()、classList.toggle()
原生js--操作类名(HTML5新增classList) classList.add( newClassName ): 添加新的类名,如已经存在,取消添加 classList.contains( ol ...
最新文章
- IOS-获取Model(设备型号)、Version(设备版本号)、app(程序版本号)等
- iOS App跳转权限设置
- 怎样设置java home_如何在Windows 7上设置java_HOME?
- Spring集成Mybatis,spring4.x整合Mybatis3.x
- Typora最好用的Markdown编辑器
- [系统安全]使用OD编写连连看外挂
- MediaElement 播放本地视频文件
- java中native的详解
- Java — Map.keySet()、Map.put()、Map.get()【Map类、Set类】
- Java版取色器(2)——安装IntelliJ IDEA
- 老猿学5G随笔:5G核心网中与用户数据相关的NF功能体UDM、AUSF、PCF、UDR
- 计算机基础的课程标准,《计算机基础》课程标准
- 【python爬虫笔记】验证码
- [附源码]计算机毕业设计JAVA社区生鲜仓库管理系统
- 博弈论在自动驾驶方向的应用(Ⅰ):变道决策的综述
- 使用window小娜实现文本转语音
- vscode 中C++运行编译运行多文件问题总结
- 4. Python面向对象语法——类的构造函数
- SitePoint Podcast#49:Buzz Kill
- 【MSFconsole进阶】exploits(渗透攻击模块):Active Exploit(主动渗透攻击)、Passive Exploit(被动渗透攻击)
热门文章
- SEO关键之密:自己创造一个关键词!
- mybatis中LIKE模糊查询的几种写法以及注意点(亲测第三种CONCAT()函数的)
- PHP性能追踪及分析工具xhprof的安装与使用
- MySQL聚簇索引:叶子保存主键或unique字段+data 非聚簇保存索引字段
- android 屏幕完美适配,Android完美适配不同屏幕
- java assert可以检查exception吗_检查胃病一定要做胃镜吗?这五种检查也可以筛查胃病疾病...
- php和java之间rsa加密互通
- 必要商城MySQL开发规范
- python根据月份获取月初月末_用python获取月末数据
- linux下创建文件没有权限,分享一个Linux无法创建文件夹,但是目录权限却显示正常的问题和解决...