html5使用postMessage解决跨域和跨窗口消息传递的解决方案

简介: html5使用postMessage解决跨域和跨窗口消息传递的解决方案

postMessage()方法允许来自不同源的脚本采用异步方式进行有限的通信,可以实现跨文本档、多窗口、跨域消息传递。


postMessage(data,origin)方法接受两个参数。


1.data:要传递的数据,html5规范中提到该参数可以是JavaScript的任意基本类型或可复制的对象,然而并不是所有浏览器都做到了这点儿,部分浏览器只能处理字符串参数,所以我们在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化,在低版本IE中引用json2.js可以实现类似效果。


2.origin:字符串参数,指明目标窗口的源,协议+主机+端口号[+URL],URL会被忽略,所以可以不写,这个参数是为了安全考虑,postMessage()方法只会将message传递给指定窗口,当然如果愿意也可以建参数设置为"*",这样可以传递给任意窗口,如果要指定和当前窗口同源的话设置为"/"。


展示页面post.html

<iframe id="iframe" src="pb.html" style="display:none;"></iframe>


    //获取框架容器;
    var iframe = document.getElementById('iframe');
    //构造数据;
    iframe.onload = function () {
        var data = {
            name: 'poleung'
        };
        //传送跨域数据;
        iframe.contentWindow.postMessage(JSON.stringify(data), "/");
    };
    // 接受返回数据;
    window.addEventListener('message', function (e) {
        console.log(e.data);
    }, false);


数据处理端pb.html

    //接收前端框架的数据;
    window.addEventListener('message', function (e) {
        console.log(e.data);
        //处理数据;
        var data = JSON.parse(e.data);
        if (data) {
            data.number = 16;
            //处理后再发回domain1
            window.parent.postMessage(JSON.stringify(data), 'http://test.com/');
        }
    }, false);


Done!

相关文章
|
8月前
|
Web App开发 前端开发 开发者
|
11月前
|
容器
layui框架实战案例(23):在layui-tab-content中layui-progress-bar在html拼接中不显示lay-percent的解决方案
layui框架实战案例(23):在layui-tab-content中layui-progress-bar在html拼接中不显示lay-percent的解决方案
251 0
|
11月前
Echarts组件tooltip提示框formatter函数返回的HTML样式解决方案
Echarts组件tooltip提示框formatter函数返回的HTML样式解决方案
284 0
|
27天前
|
移动开发 网络协议 安全
HTML5页面被运营商DNS问题及解决方案,app中h5页面源码的获取
HTML5页面被运营商DNS问题及解决方案,app中h5页面源码的获取
84 4
|
29天前
|
移动开发 JavaScript 前端开发
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
APP的HTML5页面经过运营商网络被植入手机管家问题及分析,解决方案见新文章
24 0
|
11月前
|
数据库
wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴,去除复制word或网页html冗余样式代码的解决方案)
wangEditor富文本编辑器的调用开发实录2(V5版本自定义粘贴,去除复制word或网页html冗余样式代码的解决方案)
455 0
|
11月前
|
前端开发 PHP
web开发HTML生成PDF的三种解决方案(服务器端mpdf、html2canvas.js、浏览器打印、PDF虚拟打印机)
web开发HTML生成PDF的三种解决方案(服务器端mpdf、html2canvas.js、浏览器打印、PDF虚拟打印机)
907 0
|
11月前
|
PHP
smarty模版引擎在HTML中常用的循环实例解决方案
smarty模版引擎在HTML中常用的循环实例解决方案
37 0
|
11月前
html2canvas生成PDF并下载的解决方案
html2canvas生成PDF并下载的解决方案
139 0
|
11月前
|
前端开发
Echarts实战案例代码(49):基于不支持立体漏斗图Funnel的HTML+CSS解决方案
Echarts实战案例代码(49):基于不支持立体漏斗图Funnel的HTML+CSS解决方案
133 0