Communication between browser tab pages

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 .