面向未来的浏览器页面跨域解决方案代码实例，

跨域杂谈

现代浏览器对于跨域限制是越来越多了，iframe中无法使用cooike等等问题，网上找了目前的写法，记录下来。

第一种的兼容性大于第二种。

window.postMessage

窗口1 端口：5050

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<h2>主页面</h2>
<iframe id="contentIframe" src="http://localhost:5051/demo/b.html"></iframe>
</body>
<script type="text/javascript">

    window.onload = function() {
        console.log('window页面发送消息')
        console.log(document.getElementById('contentIframe'))
        document.getElementById('contentIframe').contentWindow.postMessage(
            {
                code: 1,
                msg: 'Hello b, i am window.html'
            },
            "http://localhost:5051"
        );
    };

    window.addEventListener('message', function(event){
        // 通过origin属性判断消息来源地址
        if (event.origin === 'http://localhost:5051') {

            console.log('window页面收到消息：' + event.data.msg)

        }
    }, false);


</script>

</html>

窗口2 端口：5051

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<span>我是b页面</span><br>
<input type="button" value="回消息" onclick="postmsg()">
</body>
<script type="text/javascript">

    let parent = null;
    let origin = null;

    window.addEventListener('message', function(event){
        // 通过origin属性判断消息来源地址
        if (event.origin === 'http://localhost:5050') {

            parent = event.source
            origin = event.origin

            console.log('b页面收到消息：' + event.data.msg)

        }
    }, false);

    /**
     * 回消息方法
     *
     * 假设你已经验证了所受到信息的origin (任何时候你都应该这样做),
     * 一个很方便的方式就是把event.source作为回信的对象，
     * 并且把event.origin作为targetOrigin
     */
    function postmsg() {
        console.log('b页面回消息')
        parent.postMessage({
            code: 1,
            msg: 'hi, i am b.html'
        }, origin)
    }

</script>
</html>

详情文档 postMessage

Channel Messaging API

主页面

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width" />
    <title>Channel messaging demo</title>
</head>

<body>
    <h1>Channel 代码</h1>
    来自子页面的消息：
    <p class="output">Index页面</p>
    <iframe src="page2.html" width="480" height="320"></iframe>
    <script>
        const channel = new MessageChannel();
        const output = document.querySelector('.output');
        const iframe = document.querySelector('iframe');

        // Wait for the iframe to load
        iframe.addEventListener("load", onLoad);

        function onLoad() {
            // Listen for messages on port1
            channel.port1.onmessage = onMessage;
            // Transfer port2 to the iframe
            iframe.contentWindow.postMessage("Hello from the main page!", "*", [
                channel.port2,
            ]);
        }

        // Handle messages received on port1
        function onMessage(e) {
            output.innerHTML = e.data;
        }
    </script>
</body>

</html>

子界面

<!DOCTYPE html>
<html lang="en-US">

<head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width" />
    <title>My page title</title>
</head>

<body>
    <h3>Iframe页面</h3>
    来自主页面的消息：<p class="output">iFrame 页面</p>
    <script>
        const output = document.querySelector(".output");

        window.addEventListener("message", onMessage);

        function onMessage(e) {
            output.innerHTML = e.data;
            // Use the transfered port to post a message back to the main frame
            e.ports[0].postMessage("Message back from the IFrame");
        }
    </script>
</body>

</html>

详情文档 ChannelMessaging

封

本文采用署名-非商业性使用-相同方式共享 4.0 国际许可协议，转载请注明出处。