postmessage用法详解

postmessage用法

关于htML5的PostMessage的用法总结

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

相关视频教程推荐：html视频教程

看下面的代码：

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，就可以实现交互了。

更多编程相关学习，请关注编程入门视频教程频道！

以上就是postmessage用法详解的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！