Here is the suddenly diligent Zhuo, constantly updated in the documentation.

demand

“Z, do you think it is possible to add A new data on page A, and then synchronously refresh the page B with the newly added data?” PO said to me.

“It could be, but…” I was just about to say.

“I knew you could do it. There’s an interactive optimization point in my version. Take a look.” PO smirked.

“…”

“A pure front-end is possible, but there are limitations. Page B can only be opened by page A, and page B needs to support some functions, so page B had better be internal to our system.” I said,

“That’s ok,” PO said

The effect

Analysis of the

Scheme comparison

plan advantages disadvantages note
Through the callback function Simple and crude 1. The main page global registration function is required, which is not conducive to expansion

2. Depending on opener, once the homepage is set as empty, the contents cannot be obtained
Listening to thelocalStorage Meet basic needs Both pages must meet the same origin policy conditions
WebSocketservice 1. Not only across Windows, but also across browsers and even across accounts 1. The server must be involved

2. All pages receive events
messageThe event 1. Page homology is not required

2. Even different systems can communicate as long as they agree on the information to be transmitted		 1. Different systems need to agree on the content to be transferred using

Through the callback function

  1. First, register a global function on the window on the main pagecallback;
  2. Next, open a child page from the systemwindow.open(href, '_blank') ；
  3. Finally, through the subpagewindow.opener.window.callback()Make a function call

Window.opener: returns A reference to the window in which the current window is opened, for example: Window B is opened in Window A, b.opener returns A;

The implementation of this scheme makes use of the feature of window.opener to directly invade the main page to call a function. (You can get Windows directly, so you can’t do anything about it.)

Note: This will lead to some security problems. If the system switches to some unreliable third-party addresses, it can directly modify the contents of the system through window.opener. To solve this problem, it only needs to set opener as empty.

let page = window.open(href, '_blank')
page.opener = null
Copy the code

Listening to thelocalStorage

  1. A window updatelocalStorageThe other window listens for the window objectstorageEvent to implement communication.
// Subpage Settings
localStorage.setItem('page-event'.Date.now())

// Home page listener
window.addEventListener('storage'.function (e) {
  
    // Go do something else
})
Copy the code

Note: This method requires that both Windows meet the conditions of the same Origin policy.

WebSocketservice

With the help of a socket service in the background, let all the pages that need to communicate across Windows open a WebSocket service to listen to this address, use SEND to broadcast, other pages listen to this event, this scheme can not only cross Windows, but also across browsers.

let ws = new WebSocket('ws://localhost:3000/')
ws.onopen = function (event) {
  	// Or register this method with other events to communicate with other servers
  	ws.send({now : Date.now()}) // Relay messages through the server
    
	ws.onmessage = function (event) {
  		// Consume messages
  		console.log(event.data)
	}
}
Copy the code

messageThe event

  1. First, open a child page from the systemwindow.open(href, '_blank'):MDN;
  2. Next, listen on the main pagemessageEvents:MDN;
  3. Finally, from the sub-pagepostMessageData to the main page.

There are some limitations and security problems with message implementation. There are perfect solutions in MDN, so you can refer to it directly.

Complete implementation:

<script lang="ts" setup> import { ElButton } from 'element-plus'; import { ref } from 'vue'; let pageHandle = ref<Window>(); let message = ref<string>(); const openPage = () => { pageHandle.value = window.open('http://localhost:3000/', '_blank') ?? undefined; window? .addEventListener('message', If (event.origin === location.origin) {message.value = event.data; if (event.origin === location.origin) {message. }}); }; Const sendMessage = () => {window.postMessage(' I'm out and feeling fine. ${date.now ()} ', location.href); }; </script>Copy the code

That’s all for today’s class.