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

本文介绍了在两个跨域html页面间跳转并传递参数的方法,包括简单方案(URL传参、window.open)、传递长数据方案(window.postMessage)及终极方案——结合iframe、postMessage和localStorage。通过终极方案,可以在A页面隐藏加载B页面,用postMessage传递数据到localStorage,然后B页面打开时直接从localStorage获取数据,实现稳定传参。
摘要由CSDN通过智能技术生成

本文约定:

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

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值