弹出窗口处于活动状态时，在启动时自动加载页面

Question

Hard to come up with a title, my apologizes.

Problem is this: Since modern web-browsers disable pop-up windows I am in need of a work-around.

When a visitor comes to the website they are prompt to press a button. Once the button is pressed a pop-up window is launched with the following code:

w = window.open('/audio/audioplayer.php?id='+audioId, 'audioplayer', params);

Now that the pop-up is open I would like when the visitor views other pages the pop-up is loaded with specific information based on whatever page they are on.

I am not sure if this is possible or how I can do this (check if the pop-up window is open, and if it is load the information, and if its not re-display the button)

Answer 1

I don't think it is possible to detect where the popup is open of not.

Have you thought about using a dialog? Rather than a popup?

Answer 2

window.open returns a windowObjectReference - this is the only way you can talk to the popup window. In particular, you can tell if that window is closed with the windowObjectReference.closed attribute. And the popup window has a window.opener attribute that references the parent window back. You can use both to communicate.

However, it seems you want to keep this communication between page loads. You have a few options:

• Try to keep the link between windows as long as possible. The problem is that when the parent window reloads, all the javascript variables reset and there's no way to recover the reference to the popup - unless the popup sets it using window.opener . This link shows this approach and also another one with frames.
  You could consider it either ugly or clever. But it's not perfect. (You can't do anything if the user opens a page in a new link)
• Communicate with the server using ajax from both main pages and the popup page. When a top level page wants to send a message to the popup, they start an XMLHttpRequest to your server which notifies a script which leaves a message in a "queue". The popup page regularly polls/long-polls the server with XHR too (or server sent events , my personal favorite) and updates its own contents accordingly.
  This might be a bit more complex/expensive than you'd like but it's also the safest solution.
• Don't use popups, like the other answer suggested. A div with position: fixed could get you a similar result, and might save you from that method of communication between windows, however it also leads to having one dialog per page, so you need to ask the server if another instance of the dialog is running. Not quite sure if other methods of sync are viable for this (localstorage?)