Doing popups correctly | 易学教程

问题

Basically I have a website that offers a help system. When activated this help system triggers a popup in which the help content appears.

As the users then navigates around the site, through the use of a cookie I detect (that I set when the window is first opened and clear when the user closes the window) whether the window is still opened and load new help content for the new page.

As it turns out the only way to load new content into this popup window is to pop open a new page with the same name (so that we don't multiple popups opening everywhere) with the desired content.

This works fine the first time the user triggers the popup, but after that when I try and automatically try and pop open a window, I have problems with most browsers.

Just wondering if anyone has any ideas on how I can get this to work correctly?'

UPDATE @Rob

Here is that I have:

Page1.html

<html>
<head>
<script type="text/javascript" src="MainPopup.js"></script>
</head>
<body>
<h1>Page 1</h1>
<a href="Page2.html">Next</a>
<a href="javascript:setPopupActiveCookie();popup('Help1.html')">Click</a>
<script type="text/javascript">popupWindowIfCookieSet('Help1.html');</script>
</body>

Page2.html

<html>
<head>
<script type="text/javascript" src="MainPopup.js"></script>
</head>
<body>
<h1>Page 2</h1>
<a href="Page1.html">Prev</a>
<a href="javascript:setPopupActiveCookie();popup('Help2.html')">Click</a>
<script type="text/javascript">popupWindowIfCookieSet('Help2.html');</script>
</body>
</html>
</html>

Help1.html

<html>
<head>
<script type="text/javascript" src="Helper.js"></script>
</head>
<body>
<h1>Help 1</h1> 
</body>
</html>

Help2.html

<html>
<head>
<script type="text/javascript" src="Helper.js"></script>
</head>
<body>
<h1>Help 2</h1> 
</body>
</html>

MainPopup.js

var windowLocation;
 function setHelperWindow(new_windowLocation){
     windowLocation = new_windowLocation;
 }
 function popup(url){
     try{
         windowLocation.href = url;
     } catch(e){
         windowLocation = window.open(url, "HelperWindow").location;
     }
 }
 function popupWindowIfCookieSet() {
     //Stuffhere 
 }
 function setPopupActiveCookie() {
     //Stuffhere 
 }

Helper.js

(function(){
     var failures = 10*60; //Cancel poller after 1 minute without `opener`
     var poller = setInterval(function(){
        try{
            // Attempt to send the current location object to window.opener
            window.opener.setHelperWindow(location);
        }catch(e){
            if(!window.opener && failures-- < 0) clearInterval(poller);
        }
     }, 100);
 })();

Unfortunately this doesn't work. What should happen is that if i pop open the Helper page from Page1, when I then go to Page2.html, the popup window showing the Help1.html content would switch to Help2.html.

Currently its not doing this. Any ideas.

回答1:

If your whole website is hosted at the same domain, you can use the window.opener property, in conjunction with some adjustments at your page.

Main: Declare a variable windowLocation, and functions setHelperWindow and popup
Main-popup: Open a new window, and store a reference in variable windowLocation
Helper-window: Create a poller, which attempts to invoke the setHelperWindow of the window.opener object. If the window.opener window has closed, the poller will terminate.

Because the windowLocation variable is getting updated all the time (either after using window.open() or by the poller function in the popup), the possibility of getting blocked by a popup blocker is reduced severely.

Note: Both scripts has to be included at each main and helper page:
<script src="filename.js"></script>

Helper.js

 (function(){
     var failures = 10*60; //Cancel poller after 1 minute without `opener`
     var poller = setInterval(function(){
        try{
            // Attempt to send the current location object to window.opener
            window.opener.setHelperWindow(location);
        }catch(e){
            if(!window.opener && failures-- < 0) clearInterval(poller);
        }
     }, 100);
 })();

MainPopup.js

 var windowLocation;
 function setHelperWindow(new_windowLocation){
     windowLocation = new_windowLocation;
 }
 function popup(url){
     try{
         windowLocation.href = url;
     } catch(e){
         windowLocation = window.open(url, "HelperWindow").location;
     }
 }

Example: Usage (main)

<a href="javascript:popup('/help-pages/howto-doing-popups-correctly')">Click</a>

回答2:

Specifying a name for the window like you have done should work, e.g.

window.open('help1.html', 'help');

Then, e.g. when page2 loads,

$(function () {
    window.open('help2.html', 'help');
});

Bear in mind though that the popup blocker is going to stop this behaviour from working unless you add an exception. E.g. in chrome, options >> under the bonnet >> content settings >> pop-ups >> manage exceptions.

Disclaimer: I'm not a fan of using popups and would use a lightsout box instead for your online help, loading the content via an ajax request.

来源：https://stackoverflow.com/questions/7704267/doing-popups-correctly

标签

javascript

popup