正确执行弹出窗口

发布于 2024-12-08 19:08:17 字数 2698 浏览 0 评论 0原文

基本上我有一个提供帮助系统的网站。激活后,此帮助系统会触发一个弹出窗口,其中会显示帮助内容。

当用户在网站上导航时,通过使用 cookie(我在第一次打开窗口时设置并在用户关闭窗口时清除)检测窗口是否仍然打开并加载新的帮助内容。页。

事实证明,将新内容加载到此弹出窗口中的唯一方法是弹出一个具有相同名称的新页面(这样我们就不会在各处打开多个弹出窗口)并包含所需的内容。

当用户第一次触发弹出窗口时,这工作正常,但之后当我尝试自动尝试弹出窗口时,大多数浏览器都会出现问题。

只是想知道是否有人对我如何使其正常工作有任何想法?

更新 @Rob

这是我有的:

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);
 })();

不幸的是,这不起作用。应该发生的情况是,如果我从 Page1 弹出 Helper 页面,然后转到 Page2.html,显示 Help1.html 内容的弹出窗口将切换到 Help2.html。

目前它没有这样做。任何想法。

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.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(2

甜心小果奶 2024-12-15 19:08:17

如果您的整个网站托管在同一域中,则可以使用 window.opener 属性,并结合页面上的一些调整。

  1. Main:声明一个变量windowLocation,以及函数setHelperWindowpopup
  2. Main-popup:打开一个新窗口,并将引用存储在变量中>windowLocation
  3. Helper-window:创建一个轮询器,它尝试调用 window.opener 对象的 setHelperWindow 。如果 window.opener 窗口已关闭,轮询器将终止。

由于 windowLocation 变量一直在更新(无论是在使用 window.open() 之后还是通过弹出窗口中的 poller 函数),因此有可能被弹出窗口拦截器已大大减少。

注意:两个脚本都必须包含在每个主页面和帮助程序页面中:
     

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;
     }
 }

示例:用法(主要)

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

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.

  1. Main: Declare a variable windowLocation, and functions setHelperWindow and popup
  2. Main-popup: Open a new window, and store a reference in variable windowLocation
  3. 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>
不念旧人 2024-12-15 19:08:17

像您所做的那样为窗口指定一个名称应该可以工作,例如

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

然后,例如当 page2 加载时,

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

请记住,弹出窗口阻止程序将阻止此行为工作,除非您添加例外。例如在 chrome 中,选项>>在引擎盖下>>内容设置>>弹出窗口>>管理异常。

免责声明:我不喜欢使用弹出窗口,并且会使用 lightsout box 来代替您的在线帮助,通过 ajax 请求加载内容。

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.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文