浏览器跨标签页通信

本文探讨了如何利用BroadcastChannel在同源环境下实现窗口和iframe之间的高效数据传递,同时介绍了LocalStorage作为本地存储手段的使用。通过实例展示了如何在父页面发送消息并被子页面接收,以及LocalStorage的基本操作原理。
摘要由CSDN通过智能技术生成

1. Broadcast Channel

        该方式在同一原始域和用户代理下,所有窗口、iframe之间都可以进行交互。

(1) 父页面发送数据

var broadcastChannel = new BroadcastChannel('msg');
broadcastChannel.postMessage({
    value: $("#msg").val()
})

(2) 子页面接收数据

var broadcastChanne = new BroadcastChannel('msg'); //要接收到数据,BroadcastChannel对象的名字必须相同
broadcastChanne.onmessage = function(e){
	console.log(e.data);//发送的数据
};

2.LocalStorage、cookies等本地存储方式

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值