当前位置:网站首页>Communication between browser tab pages
Communication between browser tab pages
2022-07-01 22:24:00 【yanling. zhang】
Reprint :https://zhuanlan.zhihu.com/p/63422027
1. scene 1: Two need to interact tab Pages have dependencies – postMessage
Such as A Page through JavaScript Of window.open open B page , perhaps B Page passing iframe Embedded in A page , This situation is the simplest , Can pass HTML5 Of window.postMessage API Complete communication , because postMessage The function is bound to window Under the global object , Therefore, there must be a page in the communication page ( Such as A page ) You can get another page ( Such as B page ) Of window object , Only in this way can one-way communication be completed ;B No need to get the page A Page window object , if necessary B Page face A Page communication , Only need B Page listening message event , Get the source object , The object is A page window References to objects :
2. scene 2: The two open pages belong to the same category – storage
To achieve two unrelated homologies tab Page correspondence , You can use a more ingenious way :localstorage.localStorage The storage of follows the same origin strategy , So two homologous tab Pages can be shared through this localStorage To achieve communication , By agreement localStorage One of the itemName, Based on this key The content of the value is as “ Shared hard disk ” Means of communication .
HTML5 Provides storage event , adopt window Object listening storage event , Listen localStorage Object change events ( Include item The addition of 、 Modification and deletion ). therefore , An efficient communication mechanism can be achieved through events .
边栏推荐
- I received a letter from CTO inviting me to interview machine learning engineer
- [STM32] stm32cubemx tutorial II - basic use (new projects light up LED lights)
- 都能看懂的LIS(最长上升子序列)问题[通俗易懂]
- Application of real estate management based on 3D GIS
- 基于LSTM模型实现新闻分类
- 打出三位数的所有水仙花数「建议收藏」
- “丝路正青春 风采看福建”在闽外籍青年短视频大赛火热征集作品中
- String type conversion BigDecimal, date type
- Go — 相关依赖对应的exe
- 同花顺股票开户选哪个券商好手机开户是安全么?
猜你喜欢
随机推荐
String type conversion BigDecimal, date type
Fundamentals - IO intensive computing and CPU intensive computing
最近公共祖先(LCA)在线做法
Little p weekly Vol.11
100年仅6款产品获批,疫苗竞争背后的“佐剂”江湖
[noip2013] building block competition [noip2018] road laying greed / difference
【商业终端仿真解决方案】上海道宁为您带来Georgia介绍、试用、教程
同花顺股票开户选哪个券商好手机开户是安全么?
Pytest collection (2) - pytest operation mode
pytest合集(2)— pytest运行方式
Application of real estate management based on 3D GIS
Can I choose to open an account for stock trading on flush? Is it safe?
Training on the device with MIT | 256Kb memory
股票手机开户哪个app好,安全性较高的
Medium pen test questions: flip the string, such as ABCD, print out DCBA
Which securities company should we choose to open an account for flush stock? Is it safe to open an account with a mobile phone?
基于YOLOv5的口罩佩戴检测方法
GCC编译
都能看懂的LIS(最长上升子序列)问题[通俗易懂]
Talking from mlperf: how to lead the next wave of AI accelerator