Js实现两个跨域页面进行跳转传参的方案详解

// 在A页面点击链接，并将参数data传到B页面
<a href=”http://b.com?data=1” target=”_blank” />

// 在B页面接收A页面传过来的参数
<script>
    var data = window.location.href.split("?")[1].split("=")[1];
</script>

// A页面
<script>
    window.open(“http://b.com?data=1”, “_blank”);
</script>

// A页面

    var popup = window.open(“http://b.com”, ”_blank”);
    if(popup){
        setTimeout(function(){
            var data = {data: 1};
            popup.postMessage(JSON.stringify(data), “http://b.com”);
        },500);
    }

// B页面

    function receiveMessage(event){
        if (event.origin !== “http://a.com”) return;
        console.log(JSON.parse(event.data));   // {data: 1}
    }
    window.addEventListener(“message”, receiveMessage, false);

// A页面
<iframe id=”myIframe” src=“http://b.com” />

<script>
    var myIframe = document.getElementById(“myIframe”);
    if(myIframe ){
        var data = {data: 1};
        myIframe.contentWindow.postMessage(JSON.stringify(data), “http://b.com”);
    }
</script>

// A页面
<span onClick=”toB();”>跳转</span>
<iframe id=”myIframe” src=“http://b.com” style=”display: none” />

<script>
    function toB(){
        var myIframe = document.getElementById(“myIframe”);
        if(myIframe){
            var data = {data: 1};
            myIframe.contentWindow.postMessage(JSON.stringify(data), “http://b.com”);
            window.open(“http://b.com”, ”_blank”);
        }
    }
</script>

// B页面
<script>
    var aData = localStorage.getItem(“aPageData”);
    if(aData){
        doSomething(aData);     // 当能获取到数据时就说明是从A页面跳转过来的
        localStorage.removeItem(“aPageData”);
    }else{
        window.addEventListener(“message”, receiveMessage, false);
    }
    function receiveMessage(event){
        if (event.origin !== “http://a.com”) return;
        if(event.data){
            localStorage.setItem(“aPageData”, event.data);
        }
    }
</script>