window.open() 跳转其他系统,传参不放在URL 上

36 篇文章 1 订阅
在Vue中,可以使用window.open()和postMessage方法实现在跳转其他系统时不暴露参数的需求。
第一步:在发送数据的系统中使用以下代码:
const data = { username: 'test', age: 18 };
const targetUrl = 'http://other-system.com';
const childWindow = window.open(targetUrl, '_blank');
setTimeout(() => {
  childWindow.postMessage(data, targetUrl);
}, 1000);

这里使用了window.open()方法打开一个新窗口,并在1秒后通过postMessage()方法向该窗口发送数据。第二个参数是目标地址,在接收数据的系统中需要用到。
第二步:在接收数据的系统中使用以下代码:
window.addEventListener('message', function(e) {
  if (e.origin !== 'http://sending-system.com') return; // 检测数据来源
  const data = e.data;
  console.log(data.username); // 'test'
  console.log(data.age); // 18
});

在接收数据的系统中使用DOM API的postMessage事件监听器来检测从发送系统发送的消息。在接收到数据时,我们可以使用e.data来访问发送的数据。需要注意的是,我们可以使用e.origin来检测数据是否来自预期的来源。
这样,我们就可以通过window.open()和postMessage()方法在两个系统之间安全地传递数据了。

  • 1
    点赞
  • 16
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值