H5数据跨域交换postMessage用法

前端开发需要的书籍 前端软件开发文档编写 前端开发需要考研吗

1、与通过window.open()打开的新窗口跨域数据交换,代码如下:
<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>源窗口</title>
</head>
<body>
<button id=”btn”>打开新窗口跨域交换数据</button>
<p>我接收到来自新窗口的数据为:<span id=”msg” style=”color: red;”></span></p>
<script>
document.getElementById(‘btn’).onclick =function() {
var newWindow =window.open(‘https://wenyang12.github.io/demo/postmsg/index.html’);
//注册监听信息事件,看看是否有数据发送过来
window.addEventListener(‘message’, function (e) {
if(e.data===’true’){//要是新窗口有数据返回过来,说明新窗口已经完全加载。然后才能够给新窗口发送数据
newWindow.postMessage(‘hello world!’, e.origin);//给新窗口发送数据
console.log(e);//打印新窗口返回来的数据
document.getElementById(‘msg’).innerHTML = e.data;
}
});
};
</script>
</body>
</html>[/code]

https://wenyang12.github.io/demo/postmsg/index.html 这个地址的代码为:

<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>XDM(跨文档消息传递)</title>
</head>
<body>
<h1>我是新窗口</h1>
<p>我接收到来自源窗口的数据为:<span id=”msg” style=”color: red;”></span></p>
<script>
window.opener.postMessage(‘true’, ‘http://www.qdfuns.com’);//发送一个数据给源窗口,用于判断通过open打开的窗口是否装载完成。
/监听看有没有数据发送过来/
window.addEventListener(‘message’,function(e) {
if(e.origin !== “http://www.qdfuns.com&quot;){ // 判断数据发送方是否是可靠的地址
return
}
console.log(e);//打印接收到的数据对象
document.getElementById(‘msg’).innerHTML = e.data;
})

</script>
</body>
</html>

测试运行:

代码片段 1

<!DOCTYPE html>
<html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title>源窗口</title>
</head>
<body>
    <button id=”btn”>打开新窗口跨域交换数据</button>
    <p>我接收到来自新窗口的数据为:<span id=”msg” style=”color: red;”></span></p>
    <script>
        document.getElementById(‘btn’).onclick = function () {
            var newWindow = window.open(‘https://wenyang12.github.io/demo/postmsg/index.html’);
            //注册监听信息事件,看看是否有数据发送过来
            window.addEventListener(‘message’, function (e) {
                if (e.data === ‘true’) {//要是新窗口有数据返回过来,说明新窗口已经完全加载。然后才能够给新窗口发送数据
                    e.source.postMessage(‘hello world!’, e.origin);//给新窗口发送数据
                    console.log(e);//打印新窗口返回来的数据
                    document.getElementById(‘msg’).innerHTML = e.data;
                }
            });
        };
    </script>
</body>
</html>

2、与通过自身的iframe加载进来的页面进行跨域交换数据,代码如下:

<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>跨域交互数据-iframe</title>
</head>
<body>
<h1>跨域交互数据-iframe</h1>
<p>我接收到来自iframe的数据为:<span id=”msg” style=”color: red;”></span></p>
<iframe src=”https://wenyang12.github.io/demo/postmsg/iframe.html”></iframe>
<script>

window.onload =function() {
/向目标源发送数据/
window.frames[0].postMessage(‘收到请回!’,’https://wenyang12.github.io’);
/监听有没有返回过来的数据/
window.addEventListener(‘message’,function(e) {
console.log(e);
document.getElementById(‘msg’).innerHTML = e.data;
})
};

</script>
</body>
</html>[/code]

https://wenyang12.github.io/demo/postmsg/iframe.html 地址的代码为:

<!DOCTYPE html>
<html>
<head lang=”en”>
<meta charset=”UTF-8″>
<title>iframe</title>
</head>
<body>
<p>我是iframe</p>
<p>我接收到到的数据为:<span id=”msg” style=”color: red;”></span></p>
<script>
/监听看有没有数据发送过来/
window.addEventListener(‘message’,function(e) {
if(e.origin !== “http://www.qdfuns.com&quot;){ // 判断数据发送方是否是可靠的地址
return
}
console.log(e);//打印接收到的数据对象
document.getElementById(‘msg’).innerHTML = e.data;
/回发数据/
e.source.postMessage(‘hello world’, e.origin);
})

</script>
</body>
</html>

测试运行:

代码片段 2

<!DOCTYPE html>
<html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title>跨域交互数据-iframe</title>
</head>
<body>
    <h1>跨域交互数据-iframe</h1>
    <p>我接收到来自iframe的数据为:<span id=”msg” style=”color: red;”></span></p>
    <iframe src=”https://wenyang12.github.io/demo/postmsg/iframe.html”></iframe>
    <script>
        window.onload = function () {
            /*向目标源发送数据*/
            window.frames[0].postMessage(‘收到请回!’, ‘https://wenyang12.github.io’);
            /*监听有没有返回过来的数据*/
            window.addEventListener(‘message’, function (e) {
                console.log(e);
                document.getElementById(‘msg’).innerHTML = e.data;
            })
        };
    </script>
</body>
</html>

web前端开发工具神器 web前端开发工具神器 c# web前端开发面试题

» 本文来自:前端开发者 » 《H5数据跨域交换postMessage用法》
» 本文链接地址:https://www.rokub.com/5532.html
» 您也可以订阅本站:https://www.rokub.com
赞(0)
64K

评论 抢沙发

评论前必须登录!