快捷導(dǎo)航

Js實(shí)現(xiàn)兩個(gè)跨域頁(yè)面進(jìn)行跳轉(zhuǎn)傳參的方案詳解

更新時(shí)間：2023年12月15日 08:59:22 作者：River_何

這篇文章主要為大家詳細(xì)介紹了JavaScript中實(shí)現(xiàn)兩個(gè)跨域頁(yè)面進(jìn)行跳轉(zhuǎn)傳參的方案,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

一、簡(jiǎn)單方案

說(shuō)到頁(yè)面跳轉(zhuǎn)，首先想到的就是用a標(biāo)簽：

// 在A頁(yè)面點(diǎn)擊鏈接，并將參數(shù)data傳到B頁(yè)面
<a href=”http://b.com?data=1” target=”_blank” />

// 在B頁(yè)面接收A頁(yè)面?zhèn)鬟^(guò)來(lái)的參數(shù)
<script>
    var data = window.location.href.split("?")[1].split("=")[1];
</script>

還可以使用window.open方法跳轉(zhuǎn)頁(yè)面:

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

在B頁(yè)面獲取值同上

弊端：通過(guò)URL的方式傳參是有字符限制的，只能傳遞較少的數(shù)據(jù)

二、傳遞長(zhǎng)數(shù)據(jù)方案

想要傳遞大量數(shù)據(jù)就不能使用將數(shù)據(jù)放在URL中這種方式進(jìn)行傳遞，這里我使用了HTML5中新引入的window.postMessage方法進(jìn)行數(shù)據(jù)傳遞。

// A頁(yè)面

    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頁(yè)面

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

如果是在A頁(yè)面中使用iframe標(biāo)簽嵌入B頁(yè)面的情況下，方法如下：

// A頁(yè)面
<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>

B頁(yè)面同上

弊端:1.使用postMessage發(fā)送消息時(shí)要保證B頁(yè)面已加載，由于A和B兩個(gè)頁(yè)面是跨域的，所以使用popup.onload是無(wú)效的，只能使用setTimeout延遲發(fā)送，這種做法比較low，不能保證穩(wěn)定性。

2.使用iframe標(biāo)簽只能嵌入頁(yè)面，不能打開(kāi)新窗口，使用window.open可以打開(kāi)新窗口，但是，當(dāng)B頁(yè)面剛被加載時(shí)是沒(méi)有數(shù)據(jù)傳遞的，數(shù)據(jù)是在窗口打開(kāi)后才被發(fā)送，所以B頁(yè)面會(huì)有延遲

三、終極方案：iframe+postMessage+localStorage

在A頁(yè)面中使用iframe標(biāo)簽加載B頁(yè)面并隱藏，當(dāng)點(diǎn)擊跳轉(zhuǎn)時(shí)，使用postMessage發(fā)送消息給B頁(yè)面，在B頁(yè)面中監(jiān)聽(tīng)A頁(yè)面發(fā)過(guò)來(lái)的數(shù)據(jù)，然后保存到localStorage中，然后當(dāng)A頁(yè)面使用window.open打開(kāi)B頁(yè)面時(shí)，B頁(yè)面直接去localStorage中取數(shù)據(jù)，這樣就完成了頁(yè)面跳轉(zhuǎn)并傳參

// A頁(yè)面
<span onClick=”toB();”>跳轉(zhuǎn)</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頁(yè)面
<script>
    var aData = localStorage.getItem(“aPageData”);
    if(aData){
        doSomething(aData);     // 當(dāng)能獲取到數(shù)據(jù)時(shí)就說(shuō)明是從A頁(yè)面跳轉(zhuǎn)過(guò)來(lái)的
        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>

總結(jié)：

1.iframe和postMessage都是可以跨域的，而localStorage是不能跨域共享數(shù)據(jù)的

2.window.postMessage 中的window 始終是指將要跳轉(zhuǎn)的目標(biāo)頁(yè)面的window對(duì)象

結(jié)語(yǔ)：跨域頁(yè)面進(jìn)行跳轉(zhuǎn)傳參不僅僅只有本文中提到的這幾種方案，這里就不做過(guò)多介紹了，文中有許多細(xì)節(jié)代碼沒(méi)有寫(xiě)出，有哪里不對(duì)的地方，歡迎大家指正，最后感謝大家的支持。

到此這篇關(guān)于Js實(shí)現(xiàn)兩個(gè)跨域頁(yè)面進(jìn)行跳轉(zhuǎn)傳參的方案詳解的文章就介紹到這了,更多相關(guān)Js跨域頁(yè)面?zhèn)鲄?nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: