跨域解决方案之三---postMessage

最新推荐文章于 2024-05-11 14:56:34 发布

门_玻璃_天花板

最新推荐文章于 2024-05-11 14:56:34 发布

阅读量489

点赞数

分类专栏：系统默认文章标签： postMsg HTML5API 前端跨域

本文链接：https://blog.csdn.net/gong_zhe_511/article/details/66972678

版权

系统默认专栏收录该内容

17 篇文章 0 订阅

订阅专栏

…….续前缘

前文说到的jsonp, 正在向前端靠拢. 而本文所说的postMessage, 跟后台已经没有任何关系了. 因为用的是HTML5 新API: canvas, video, audio, history, postMessage.
百度百科对它的解释如下: PostMessage是Windows API(应用程序接口) 中的一个常用函数，用于将一条消息放入到消息队列中。
战前准备: 两个**非同源**website, 请见jsonp的战前准备
请求方(request)和响应方(response). request.html如下(wamp):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>请求方</title>
        <meta content="initial-scale=1.0,maximum-scale=1.0,width=device-width" name="viewport">
    </head>
    <body>
        <div class="form-wrap">
            <button ontouchstart="fnSearch();">查询</button>
        </div>
    </body>
    <script>
        function fnSearch(){
    var newWindow = window.open('http://localhost:8020/test2/response.html');
    window.addEventListener('message', function(e){
        if (e.data) {
            newWindow.postMessage('hello world!', e.origin);
            console.log(e);
        }
    });
}
    </script>
</html>

response.html如下(HBuilder):

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>手机时间选择</title>
        <meta content="initial-scale=1.0,maximum-scale=1.0,width=device-width" name="viewport">
    </head>
    <body>
        <div class="form-wrap">
            <button id="search" type="button">查询</button>
        </div>
    </body>
    <script type="text/javascript">
        document.getElementById('search').onclick = function(){
            window.opener.postMessage('测试123', 'http://localhost:80/chart/index.html');
            window.addEventListener('message',function(e){
                console.log(e);
            }, false);
        };
    </script>
</html>