两个html之间跳转确定点,两个跨域页面进行跳转传参的终极方案

小蛮腰课代表

墨衍会员 · AI 创作全网分发码龄8年

关注

转载最新推荐文章于 2024-12-29 07:45:36 发布 2.2k 阅读 AI 写同款· GEO 优化 ›

本文约定：

A页面：跳转前的原来页面，假设为http://a.com

B页面：将要跳转的目标页面，假设为http://b.com

一、简单方案

说到页面跳转，首先想到的就是用a标签：

// 在A页面点击链接，并将参数data传到B页面

// 在B页面接收A页面传过来的参数

var data = window.location.href.split("?")[1].split("=")[1];

还可以使用window.open方法跳转页面:

// A页面

window.open(“http://b.com?data=1”, “_blank”);

在B页面获取值同上

弊端：通过URL的方式传参是有字符限制的，只能传递较少的数据

二、传递长数据方案

想要传递大量数据就不能使用将数据放在URL中这种方式进行传递，这里我使用了HTML5中新引入的window.postMessage方法进行数据传递。

// 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标签嵌入B页面的情况下，方法如下：

// A页面

var myIframe = document.getElementById(“myIframe”);

if(myIframe ){

var data = {data: 1};

myIframe.contentWindow.postMessage(JSON.stringify(data), “http://b.com”);

}

B页面同上

弊端:

1.使用postMessage发送消息时要保证B页面已加载，由于A和B两个页面是跨域的，所以使用popup.onload是无效的，只能使用setTimeout延迟发送，这种做法比较low，不能保证稳定性。

2.使用iframe标签只能嵌入页面，不能打开新窗口，使用window.open可以打开新窗口，但是，当B页面刚被加载时是没有数据传递的，数据是在窗口打开后才被发送，所以B页面会有延迟

三、终极方案：iframe+postMessage+localStorage

在A页面中使用iframe标签加载B页面并隐藏，当点击跳转时，使用postMessage发送消息给B页面，在B页面中监听A页面发过来的数据，然后保存到localStorage中，然后当A页面使用window.open打开B页面时，B页面直接去localStorage中取数据，这样就完成了页面跳转并传参

// A页面

跳转

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”);

}

// B页面

var aData = localStorage.getItem(“aPageData”);

if(aData){