首页 > 其他分享 >两个跨域页面进行跳转传参的终极方案

两个跨域页面进行跳转传参的终极方案

时间:2024-05-30 14:45:45浏览次数:19  
标签:传参 postMessage 跨域 com window 跳转 data 页面

本文约定:
A页面:跳转前的原来页面,假设为a.com
B页面:将要跳转的目标页面,假设为b.com

一、简单方案

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

// 在A页面点击链接,并将参数data传到B页面
<a href="http://b.com?data=1" target="_blank" />
// 在B页面接收A页面传过来的参数
<script>
var data = window.location.href.split("?")[1].split("=")[1];
<script>

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

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

弊端:通过URL的方式传参是有字符数量限制的,只能传递较少的数据。

二、传递长数据方案

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

// A页面
<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页面
<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页面中使用iframe标签嵌入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>

弊端

  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页面
<span onClick="toB();">Jump</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); // 当能获取到数据时就说明是从A页面跳转过来的
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>

总结:

  1. iframe和postMessage都是可以跨域的,而localStorage是不能跨域共享数据的。
  2. window.postMessage中的window始终是指将要跳转的目标页面的window对象。

标签:传参,postMessage,跨域,com,window,跳转,data,页面
From: https://www.cnblogs.com/sy2022/p/18222297

相关文章

  • 微信小程序之实现弹窗组件及点击弹窗按钮实现页面跳转
    创建一个名为PopupWindow的弹窗组件:   1、创建组件目录结构:    在项目的components目录下新建一个名为PopupWindow的文件夹,里面包含四个核心文件: PopupWindow.wxml 、PopupWindow.wxss、PopupWindow.js 、PopupWindow.json   2、编写组件文件......
  • 微信小程序怎么进行传参
    微信小程序进行传参有多种方式,以下是几种常见的传参方法及其详细解释:URL参数传值方法:通过在跳转链接中附加参数,在目标页面的onLoad函数中获取参数。示例代码//在页面A中跳转到页面B,并传递参数wx.navigateTo({url:'/pages/targetPage/targetPage?id=123&name=Joh......
  • 解决因跨域导致使用a标签下载文件download属性失效无法自定义命名的问题
    问题背景:在使用a标签下载文件时,download属性可以更改下载的文件//下载a.exe,并采用默认命名<ahref="/images/a.exe"download>点击下载</a>//将a.exe改名为b.exe下载<ahref="/images/a.exe"download="b">点击下载</a>注意:html5新特性a标签download属性只支持......
  • nginx代理jenkins无法跳转问题
    我的jenkinsdockerrun-d--namejenkins-p7005:8080-eJENKINS_OPTS="--prefix=/jkns"-v/data/jenkins:/var/jenkins_home-v/data/app:/appjenkins/jenkins主要是需要加--prefix=/jknsnginx配置:location/jkns{proxy_set_headerReferer$http_refer......
  • Vue3 实现登录跳转页面
    点击登录按钮即跳转到新页面,而不是在当前页面加载组件App.Vue:<script>exportdefault{data(){return{}}}</script><template>//必须加上router-view,否则会显示空白页面<router-view></router-view></template><style></style>main......
  • 发布ClickOnce应用程序步骤与URL传参应用
    目录一、ClickOnce应用程序发布配置二、URL传参应用 一、ClickOnce应用程序发布配置签名-为ClickOnce清单签名→取消勾选签名-为程序集签名→取消勾选安全性-启用ClickOnce安全设置→勾选安全性-这是完全可信的应用程序→勾选发布-发布文件夹位置......
  • 什么是跨域?什么情况会触发跨域,应该如何解决跨域?
    什么是跨域?什么情况会触发跨域,以及如何解决跨域?什么是跨域?跨域(Cross-Origin)是指在一个网页中,发起对不同源(域名、协议或端口不同)的资源请求。由于安全原因,浏览器默认会阻止这种跨域请求,这是因为同源策略(Same-OriginPolicy)的限制。同源策略是浏览器的一种安全机制,用于防止不同来......
  • 调用三方接口,outputStream.write传参数中参数怎么写,在转化成字节数组之前,是A=a&B=b的
    当您调用第三方接口并通过OutputStream.write()方法发送参数时,如果接口期望的是application/x-www-form-urlencoded类型的参数(常见于POST请求中提交表单数据),那么您确实需要将参数转换成A=a&B=b这样的格式,然后再将这个字符串转换成字节数组。以下是转换和发送这种类型参数的步骤:......
  • 调用三方接口,outputStream.write传参数中参数怎么写
    当您调用一个第三方接口并需要使用OutputStream.write()方法发送数据时,您通常需要将数据转换为字节格式,因为write()方法接受的是字节(byte)、字节数组(byte[])或字节数组的一个子序列作为参数。以下是几种常见的情况和相应的示例:发送字节数组:如果您已经有了一个字节数组,您可以直接......
  • springboot2.7.18配置跨域
    一.springboot整合security后一般要配置security的跨域和mvc的跨域才能实现跨域1.spring-security配置跨域@BeanpublicSecurityFilterChainfilterChain(HttpSecurityhttp)throwsException{http.csrf().disable().cors();returnhttp.build();......