跨域问题2

最新推荐文章于 2022-07-17 21:24:38 发布

christianashannon

最新推荐文章于 2022-07-17 21:24:38 发布

阅读量170

点赞数

分类专栏： JavaScript 文章标签： javascript 浏览器 html5

本文链接：https://blog.csdn.net/christianashannon/article/details/78867183

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

使用window.postmessage方法来跨域

Html5里有一个属性window.postmessage也可以用来跨域：

postmessage(data,origin)有两个参数：

data: 要传递的数据，html5规范中该参数可以是JavaScript的任意基本类型或可复制的对象，考虑到部分浏览器只能处理字符串参数，所以在传递参数的时候需要使用JSON.stringify()方法对对象参数序列化，对postmessage()方法的支持度为IE8+；

origin: 字符串参数，指明目标窗口的源；设置为* 则为通配，这样可以传递给任意窗口，如果要指定和当前窗口同源的话设置为”/”

例如有两个页面：

http://test.com/index.html

http://receive.com/index.html

在http://test.com/index.html中发送信息：

<script>

var obj= {

key: 'values'

}

window.onload=function(){

win.postMessage(obj,'http://receive.com/index.html');

}

</script>

然后再在http://receive.com/index.html中接受消息，渲染显示：


window.onmessage=function(e){

if(e.origin !== 'http://test.com/index.html') return; //做一下安全性判断，看看消息是否是由可信源头发送

console.log(e.origin+' '+e.data.key); //接受跨域数据，渲染

}

//http://test.com/index.html values

window.postmessage()也可用在iframe的通信中，例如(该实例来源于：http://www.cnblogs.com/dolphinX/p/3464056.html)：

<!DOCTYPE html>
<html>
<head>
    <title>Post Message</title>
</head>
<body>
    <div style="width:200px; float:left; margin-right:200px;border:solid 1px #333;">
        <div id="color">Frame Color</div>
    </div>
    <div>
        <iframe id="child" src="http://lsLib.com/lsLib.html"></iframe>
    </div>

    <script type="text/javascript">

        window.onload=function(){
            window.frames[0].postMessage('getcolor','http://lslib.com');
        }

        window.addEventListener('message',function(e){
            var color=e.data;
            document.getElementById('color').style.backgroundColor=color;
        },false);
    </script>
</body>
</html>

http://test.com/index.html

<!doctype html>
<html>
    <head>
        <style type="text/css">
            html,body{
                height:100%;
                margin:0px;
            }
        </style>
    </head>
    <body style="height:100%;">
        <div id="container" onclick="changeColor();" style="widht:100%; height:100%; background-color:rgb(204, 102, 0);">
            click to change color
        </div>
        <script type="text/javascript">
            var container=document.getElementById('container');
            window.addEventListener('message',function(e){
                if(e.source!=window.parent) return;
                var color=container.style.backgroundColor;
                window.parent.postMessage(color,'*');
            },false);
            function changeColor () {            
                var color=container.style.backgroundColor;
                if(color=='rgb(204, 102, 0)'){
                    color='rgb(204, 204, 0)';
                }else{
                    color='rgb(204,102,0)';
                }
                container.style.backgroundColor=color;
                window.parent.postMessage(color,'*');
            }
        </script>
    </body>
</html>

christianashannon

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
跨域问题2

使用window.postmessage方法来跨域Html5里有一个属性window.postmessage也可以用来跨域：postmessage(data,origin)有两个参数：data: 要传递的数据，html5规范中该参数可以是JavaScript的任意基本类型或可复制的对象，考虑到部分浏览器只能处理字符串参数，所以在传递参数的时候需要使用JSON.stringify()方法对对象参数序列
复制链接

扫一扫