Shulou(Shulou.com)06/02 Report--

This article focuses on "how to achieve communication between two browser windows". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to communicate between two browser windows.

1 、 localStorage

One window updates the localStorage, and the other listens for the "storage" event of the window object to achieve communication.

Note: both pages should be of the same origin (the protocol, domain name and port of URL are the same)

/ / the setting code for this window is localStorage.setItem ('aaa', (Math.random () * 10). ToString ()) / / other windows listen for storage events window.addEventListener ("storage", function (e) {console.log (e) console.log (e.newValue)}) 2, WebSocket

All WebSocket listen to the same server address, use send to send messages, use onmessage to get changes in messages, not only window, but also cross-browser, compatibility, just need to consume some server resources.

Var ws = new WebSocket ("ws://localhost:3000/") ws.onopen = function (event) {/ / or register this method in another event, you can communicate ws.send ({now: Date.now ()}) with other servers; / / transfer messages through the server}; ws.onmessage = function (event) {/ / consume messages console.log (event.data);} 3, postMessage

With iframe or window.open

Review the API.

OtherWindow.postMessage (message, targetOrigin, [transfer])

OtherWindow:

A reference to another window, such as the contentWindow property of iframe, the window object returned by the execution window.open, or a named or numerically indexed window.frames.

Message:

The data to be sent to another window. It will be serialized by the structured cloning algorithm. This means that you can safely transfer the data object to the target window without having to serialize it yourself.

TargetOrigin:

The origin property of the window is used to specify which windows can receive message events, which can be a string "" (for * *) or a URI. When sending a message, if any of the protocol, host address, or port of the destination window does not match the value provided by targetOrigin, the message will not be sent; only if the three match exactly will the message be sent. This mechanism is used to control which windows messages can be sent to; for example, when sending a password using postMessage, this parameter is particularly important to ensure that its value is exactly the same as the origin property of the intended recipient of the message containing the password to prevent the password from being intercepted by a malicious third party. If you know exactly which window the message should be sent to, always provide a targetOrigin with the exact value instead of. Failure to provide an exact target will result in data disclosure to any malicious site that is interested in the data.

Transfer optional:

Is a string of Transferable objects passed at the same time as message. Ownership of these objects will be transferred to the recipient of the message, while the sender will no longer retain ownership.

/ * * the domain name of window An is. The following is the code under the script tag of window A: * / var popup = window.open (. Popup details...) / / if the pop-up box is not blocked and the loading is complete / / the statement does not send a message, even assuming that the current page has not changed location (because the targetOrigin setting is incorrect) popup.postMessage ("The user is' bob' and the password is' secret'", "https://secure.example.net");") / / assuming the current page does not change the location, this statement will successfully add message to the sending queue (targetOrigin is set correctly) popup.postMessage ("hello there!", "http://example.org"); function receiveMessage (event) {/ / can we trust the sender of the message? Maybe this sender is not the same page as the one we first opened. If (event.origin! = "http://example.org") return; / / event.source is the pop-up page we opened through window.open popup / / event.data is the message sent by popup to the current page" hi there yourself! The secret response is: rheeeeet! "} window.addEventListener (" message ", receiveMessage, false); / * * the popup domain name of the pop-up page is, and the following is the code in the script tag: * / / when page A postMessage is called, this function is called by addEventListenner to function receiveMessage (event) {/ / can we trust the information source? If (event.origin! = "http://example.com:8080") return; / / event.source on the source page of the current pop-up page / / event.data is" hello there! "/ / assuming you have verified the origin of the information received (you should do so at any time), a convenient way is to take enent.source / / as the reply object and event.origin as the targetOrigin event.source.postMessage (" hi there yourself!! The secret response "+" is: rheeeeet! ", event.origin);} window.addEventListener (" message ", receiveMessage, false); 4, cookie + setInterval [poor]

On page A, set an operation that uses the setInterval timer to refresh constantly, check whether the value of Cookies has changed, and refresh if it changes.

Since Cookies is readable in the same domain, page An is naturally available when you change the value of Cookies during page B review.

It is true that this can achieve the desired functionality, but this approach is quite a waste of resources. Although in this era of excessive performance, whether it is wasteful or not can not be felt, but this kind of implementation is really not elegant enough.

5 、 SharedWorker

Web Worker in HTML5 can be divided into two different thread types, one is dedicated thread Dedicated Worker, and the other is shared thread Shared Worker.

Dedicated Worker can be created directly using new Worker (), and this webworker is proprietary to the current page.

SharedWorker can be used by multiple window, tabs, and iframe, but you must ensure that these tabs are of the same origin (same protocol, host and port number).

6. Direct citation

In fact, it is to get each other's DOM directly, which is suitable for two pages in the same domain; you can pass object data (there is a hole when the object data uses instanceof for type judgment); refer to window.open

Example:

/ / the parent page gets the child iframe document.getElementById ('iframe's id'). ContentWindow.document / / the child iframe gets the parent page window.parent.document7 and window.name

The browser window has a window.name property. The characteristic of this property is that it can be read by the latter page as long as it is set by the previous page in the same window, whether it is of the same origin or not.

The parent window first opens a child window and loads a web page from a different source that writes information to the window.name property.

Window.name = data

Next, the child window jumps back to a URL in the same domain as the main window.

_ window.location.href = 'http://parent.url.com/xxx.html';

The main window can then read the window.name of the child window.

Var data = document.getElementById (id' of 'iframe). ContentWindow.name

The advantage of this method is that the window.name has a large capacity and can place very long strings; the disadvantage is that you must listen for changes in the window.name properties of the child window, which affects the performance of the web page.

At this point, I believe you have a deeper understanding of "how to achieve communication between two browser windows". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.