HTML中postmessage的用法介绍-创新互联

今天小编给大家分享的是HTML中postmessage的用法介绍，相信很多人都不太了解，为了让大家更加了解HTML中postmessage的用法，所以给大家总结了以下内容，一起往下看吧。一定会有所收获的哦。

成都创新互联公司专注骨干网络服务器租用十多年，服务更有保障！服务器租用，IDC机房托管成都服务器租用，成都服务器托管，骨干网络带宽，享受低延迟，高速访问。灵活、实现低成本的共享或公网数据中心高速带宽的专属高性能服务器。

postmessage用法

关于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"/>
<h2>test接收区</h2>
</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>
<h2 class="header">page B</h2>
 
<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"/>
<h2>test接收区</h2>
</head>
<body>
 
 
<h2 class="header">page A</h2>
<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，就可以实现交互了。

关于HTML中postmessage的用法介绍就分享到这里了，希望以上内容可以对大家有一定的参考价值，可以学以致用。如果喜欢本篇文章，不妨把它分享出去让更多的人看到。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。

文章标题：HTML中postmessage的用法介绍-创新互联
文章路径：https://www.cdcxhl.com/article2/dpehic.html

成都网站建设公司_创新互联，为您提供标签优化、App设计、软件开发、面包屑导航、网页设计公司、网站导航

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源：创新互联

猜你还喜欢下面的内容