本文約定：
A頁(yè)面：跳轉(zhuǎn)前的原來頁(yè)面削锰，假設(shè)為http://a.com
B頁(yè)面：將要跳轉(zhuǎn)的目標(biāo)頁(yè)面，假設(shè)為http://b.com
一官还、簡(jiǎn)單方案
說到頁(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)鬟^來的參數(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è)面獲取值同上
弊端：通過URL的方式傳參是有字符限制的剥槐，只能傳遞較少的數(shù)據(jù)
二慨灭、傳遞長(zhǎng)數(shù)據(jù)方案
想要傳遞大量數(shù)據(jù)就不能使用將數(shù)據(jù)放在URL中這種方式進(jìn)行傳遞朦乏，這里我使用了HTML5中新引入的window.postMessage方法進(jìn)行數(shù)據(jù)傳遞。
// A頁(yè)面
<script>
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);
}
</script>
// B頁(yè)面
<script>
function receiveMessage(event){
if (event.origin !== “http://a.com”) return;
console.log(JSON.parse(event.data)); // {data: 1}
}
window.addEventListener(“message”, receiveMessage, false);
</script>
如果是在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是 無效的筹陵，只能使用setTimeout延遲發(fā)送刽锤，這種做法比較low，不能保證穩(wěn)定性朦佩。
2.使用iframe標(biāo)簽只能嵌入頁(yè)面并思，不能打開新窗口，使用window.open可以打開新窗口语稠，但是宋彼，當(dāng)B頁(yè)面剛被加載時(shí)是沒有數(shù)據(jù)傳遞的，數(shù)據(jù)是在窗口打開后才被發(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)聽A頁(yè)面發(fā)過來的數(shù)據(jù)，然后保存到localStorage中先口，然后當(dāng)A頁(yè)面使用window.open打開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í)就說明是從A頁(yè)面跳轉(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)頁(yè)面的window對(duì)象
結(jié)語(yǔ)：跨域頁(yè)面進(jìn)行跳轉(zhuǎn)傳參不僅僅只有本文中提到的這幾種方案厢汹，這里就不做過多介紹了，文中有許多細(xì)節(jié)代碼沒有寫出谐宙，有哪里不對(duì)的地方烫葬，歡迎大家指正，最后感謝大家的支持。
更多個(gè)人文章
