快捷導(dǎo)航

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

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

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

一、簡單方案

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

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

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

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

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

在B頁面獲取值同上

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

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

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

// 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標(biāo)簽嵌入B頁面的情況下，方法如下：

// 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>

B頁面同上

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

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

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

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

// A頁面
<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頁面
<script>
    var aData = localStorage.getItem(“aPageData”);
    if(aData){
        doSomething(aData);     // 當(dāng)能獲取到數(shù)據(jù)時就說明是從A頁面跳轉(zhuǎn)過來的
        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)頁面的window對象

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

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

您可能感興趣的文章: