JS multi-page prompt function at the same time how to write? - Codes Helper - Programming Question Answer

JS multi-page prompt function at the same time how to write?

as shown in the picture, the structure of the browser is: 1 br 2 strong 3 is a business web page, while a yellow web page is an irrelevant web page.
page 1 Magi 2 Magin3 is a business web page, which needs to add a prompt function. three minutes poll the background once, and if there is no, everything is still. It requires three pages to produce prompt tone and prompt text "at the same time".

if three pages exist on the browser at the same time, which web page the current user is browsing, the current web page will have a tone and text, while other pages will only have text
if three pages exist on the browser at the same time and the user is browsing other unrelated pages (all three pages are not active), only page 2 will generate a tone and other pages will have prompt text
the order in which the user opens the page is random and unordered, but requires three pages to be prompted at the same time and can only have

4. If you open only one web page, it"s easy to say that you can check the background once in three minutes, but if you open two or three pages at the same time, there will be the above three problems.
I think when opening the first page, everything will be all right. If the user jumps from the first page to the second page and passes a time parameter, this ensures that the page in the browser will request the interface at the same time, but there may be errors due to problems such as browser, server and network speed. I don"t know what to do, and the manager is not allowed to use websocket.
I would like to ask if you have any good ideas?

React.js html5 javascript

Dec.27,2021

use localStorage to share the status
indicates whether there is a page processing
b indicates whether there is a prompt
each page to start a timer, each time to read the corresponding status, and do corresponding processing
when each page is lost in the current window, Also write the corresponding state

you can use sharedworker in webworker to realize that multiple pages share an extra thread of a browser in this thread and distribute it uniformly to other pages

.

Previous: How to simulate document.cookie assignment in browser in Node environment?

Next: Angular6 builds and deploys to the back-end java project

Vue routing configuration child routing paths cannot be switched later, as shown in the code below
{ path: song , component: Song, children: [ { path: :id , component: Songditail }, { path: getNewsList , component: newslist } ] } this.$router.push({ path: song getNews }) newslist ...

Express react.js html5 javascript

Mar.04,2021
How do create react app-packaged applications come with service worker, to update applications?
the application packaged with create react app comes with service worker, which causes it to be redeployed and cannot be updated. How to update the application? ...

React.js html5 javascript

Mar.05,2021
Why is the obtained ref undefined?
import React from react import . style.less import HomeList from .. .. .. components List import HomeMore from .. .. .. components LoadMore import { getListData } from .. .. .. fetch home home class List extends React.Component { ...

Chrome react.js html5 javascript

Mar.06,2021
Can you explain how this is realized through the react source code?
import React from react import PureRenderMixin from react-addons-pure-render-mixin import . style.less class SearchInput extends React.Component { constructor(props, context) { super(props, context); this.shouldComponent...

React.js html5 javascript

Mar.07,2021
ClassName cannot be added to the pop-up box of the calendar component in antd
add className, to the pop-up box of the calendar component in antd and add dropdownClassName, according to his api, but it has no effect. I took a look at the source code and there is no dropdownClassName attribute. Ask the boss to answer . ...

React.js html5 javascript

Mar.10,2021
React adding a key value to a node does not take effect
effect description: each time you add the + button, you can add a new row of new columns, and click the following to delete the row. :,. : cause analysis: react s diff algorithm needs to add key values to nodes to recognize different nodes, so add...

React.js html5 javascript

Mar.10,2021
How does redux trigger a callback function after an dispatch asynchronous operation is completed?
Is rt redux-thunk used to handle this ...

React.js html5 javascript

Mar.10,2021
React simulates mock
I used mock to simulate a piece of data let list = Mock.mock ( " pie ", {) moni:{ salesTypeData:[ { x: 0, y: 2018-5-10 , }, { x: 20, y: 2018-5-11 , }, { ...

Mock echarts react.js html5 javascript

Mar.11,2021
Management of whether ui components are visible in mobx?
there is a problem with using mobx: obtain the backend interface data through @ action, then assign a value to @ observable data, and then calculate whether the modal needs to be displayed from data through @ computed modalVisiable. How can I change t...

Mobx redux react.js html5 javascript

Mar.11,2021
What does it mean not to mutate the value of (mutate) props or state
I don t quite understand what I saw when I was learning react by myself. Can you explain. this can be a problem if the props and state properties have more complex data structures. For example, let s write a ListOfWords component to show a comma-sepa...

React.js html5 javascript

Mar.11,2021
How to insert a newline symbol when a string is output
in the string given to me by the background, if a newline is n r, how can I insert a newline symbol such as br when I use it? it is not good for me to write it directly in the string, just as the string is output to me . <div > {state.list[c...

React.js html5 javascript

Mar.12,2021
What's the problem with react's setState in the timer?
state= { val:0 } put on the timer to execute setState twice in a row setState what I see is that the setState twice put in the timer is Synchronize , and the twice setState is asynchronous without a timer. Can you help me explain this? ...

React.js html5 javascript

Mar.13,2021
React has five bottom navigation, which will lead to a white screen when you quickly switch between the home page and my click.
recently did a react project and found a bug, that shows normal when you click on the bottom navigation, and when you click quickly, when you switch between the home page and my module, my module will turn white. ...

React.js html5 javascript

Mar.13,2021
How does the front end know when the download is successful by pointing the URL to the download address?
point to the download address through window.location.href to download the file. How to get the time after the download is successful? ...

React.js html5 javascript

Mar.29,2021
How to encapsulate a diagram plug-in similar to Echarts force map
Let me encapsulate a component and an echarts-like diagram plug-in this morning. Like this in the figure, there is also a timeline function at the bottom, where nodes can click, click events, support nodes to add pictures, and replace them with user ava...

React.js html5 javascript

May.08,2021
Adding thermal effects to timeline of echarts
just started to encapsulate a diagram plug-in, with the timeline that is the kind of timeline, I found that echarts has timeline, but also requires the addition of thermal effects on the timeline. is the thermal effect of 24 hours to be reflected in the...

React.js html5 javascript

May.09,2021
Guide diagram of echarts force can two nodes connect multiple lines?
echarts diagram (force guide diagram) can multiple lines be connected between two nodes? Something like this in the picture? ...

React.js html5 javascript

May.15,2021
The local picture upload server is transferred to base64.
choose the picture locally and upload it to the server through ajax. Do not want to use the form form, use the fileReader of h5 to report an error, how to solve converted code convertToBase64() { let fileReader = new FileReader() 2m con...

React.js html5 javascript

Jun.08,2021
Setting img.src in componentDidUpdate cannot trigger img.onload event callback
componentDidUpdate(prevProps, prevState, snapImg){ if(this.props.bookImg!=null && this.props.bookImg!==prevProps.bookImg){ var canvas= document.createElement( canvas ); var ctx= canvas.getContext( 2d ); var img= ne...

React.js html5 javascript

Jul.08,2021
Problems related to React multi-page application!
the default program entry for projects created using create-react-app is index.js,. The default home page is public index.html. But I want to do multiple web pages in the project, how can I associate index.js and index.html in the about directory? ...

React-native react.js html5 javascript

Sep.27,2021

Menu