关于html5的PostMessage的用法总结

大家都知道，网页之间传递数据可以使用ajax请求来完成，今天我总结下我学习的postMessage是如何完成跨页面请求数据的呢？首先，postMessage是html5新增的一个解决跨域的一个方法。那他是如何使用的呢？这里我把一个案例分享出来把。看下面的代码：

test.html

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"/>
</head>
<body></body>
<script>
onmessage=function(e){e=e||event;document.write("my name is ",e.data);document.body.style.background = 'red';
};
</script>
</html>

1.html

<!DOCTYPE html>
<html>
<head><title>window.postMessage</title><meta charset="utf-8"/><h1>test接收区</h1>
</head>
<body></body>
<iframe id="f" src="http://localhost:8080/chajian/test.html"></iframe>
<script>
var f=document.getElementById("f");
//给框架网页发送消息，然后收到之后，会传送过来。
f.οnlοad=function(){setTimeout(function(){f.contentWindow.postMessage("谢霆锋","http://localhost:8080");},3000)
}
</script>
</html>

首先，它的原理是这样的。我就拿我的案例代码来说吧。

1.html里面镶嵌了一个iframe网页框架，他就是靠这里传输数据的，等1.html加载完成之后，他会主动发给test.html 谢霆锋，然后test.html收到之后，它里面有接收消息的处理函数，他收到消息之后，立马，给网页返回一段字符串，然后把自己的背景改成红色。这样就达到了网页互动的效果，可惜的是，万恶的ie6.7不支持，兼容度不高。

注意：postMessage的写法，postMessage之前写的是你要通信的window对象（也就是你要向谁通信），此时的window.parent的权限仅限于此，不能在像同域似的，进行获取父级的DOM元素，否则浏览器会报错，提示你不能进行跨域访问，我们再来看postMessage中所接收的参数，第一个参数就是你要像另外一个窗口传递的数据（只能传字符串类型），第二个参数表示目标窗口的源，协议+主机+端口号，是为了安全考虑，如果设置为“*”，则表示可以传递给任意窗口。

上面是单页面交互的，下面给个双页面交互的。其实都是一样的，不过就是两个页面都写了监听发送事件。

test.html

<!DOCTYPE html>
<html>
<head><title></title><meta charset="utf-8"/>
</head>
<body><h1 class="header">page B</h1><input type="text" id="inp" value="我想你">
<button οnclick="send()">send</button></body><script>
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事件
}
</script>
</html>

1.html

<!DOCTYPE html>
<html>
<head><title>window.postMessage</title><meta charset="utf-8"/><h1>test接收区</h1>
</head>
<body><h1 class="header">page A</h1>
<div class="mb20"><textarea name="ta" id="data" cols="30" rows="5">hello world</textarea><button style="font-size:20px;" οnclick="send()">post message</button>
</div>
<!-- 跨域的情况 -->
<iframe src="http://localhost:8080/chajian/test.html" id="child" style="display: block; border: 1px dashed #ccc; height: 300px;"></iframe><script>
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);
</script>
</body>
</html>

同样的，1.html是主页面。打开html，就可以实现交互了。

关于html5的PostMessage的用法总结相关推荐

html5 通信方式,(原生js页面通信)关于html5的PostMessage的用法总结
大家都知道,网页之间传递数据可以使用ajax请求来完成,今天我总结下我学习的postMessage是如何完成跨页面请求数据的呢?首先,postMessage是html5新增的一个解决跨域的一个方法.那 ...
php中 datalist,html5 datalist标签的用法是什么？这里有datalist标签的用法实例
本篇文章主要为大家讲述了关于html5 datalist标签的用法及html5 datalist标签的用法实例.本文说了两个常用的选项框的实例供大家选择观看,下面就让我们一起来看这篇文章吧我们先来看 ...
html5新特性与用法大全了解一下
有好多小伙伴私聊我问我html5新特性和用法,下面我给大家具体介绍一下html5都新加了哪些新特性,下面我给大家总结一下. 1)新的语义标签 footer header 等等 2)增强型表单表单2 ...
html5 meter,html5 meter标签是什么意思？html5 meter标签的用法及属性介绍
html5 meter标签是什么意思?html5 meter标签的用法及属性介绍都在这里,本篇文章主要介绍了html5 meter标签的定义和具体的使用方法,还有html5 meter标签的属性介绍 ...
html5 section标签,html5 section标签是什么意思？html5 section标签的用法总结
本篇文章主要的介绍了关于HTML5 section标签的定义以及它的用法,最后还有一个案例总结,现在让我们开始阅读这篇文章吧先来解释下html5 section标签的意思: html5 sectio ...
html5比html4的音频使用方法,HTML5 audio标签的用法示例
您的位置:首页 - 教程 - HTML5 - 正文 HTML5 audio标签的用法示例标签定义声音,比如音乐或其他音频流.html5 audio可以不用Flash插件就可以听音乐看视频,并不是全部 ...
html5跨域 postmessage,html5跨域通讯之postMessage的用法总结
postMessagePortal.html 页面代码复制代码代码如下: 标题 var targetOrigin = "http://22527.vhost20.boxcdn.cn&quo ...
html5跨域通讯之postMessage的用法
转自:http://www.cnblogs.com/wshiqtb/p/3171199.html postMessagePortal.html 页面代码 <!DOCTYPE html> & ...
html5标签详解,HTML5中figcaption标签用法详解
HTML5中figure和figcaption标签一般都是配套使用的,先了解下两者的基本定义,然后结合实例来说明两者的用法. 标签规定独立的流内容(图像.图表.照片.代码等等). figure元素的内 ...

关于html5的PostMessage的用法总结

关于html5的PostMessage的用法总结相关推荐

最新文章

热门文章