Fatal编程技术网

Javascript 正确执行弹出窗口

javascript

Javascript 正确执行弹出窗口,javascript,popup,Javascript,Popup,基本上我有一个提供帮助系统的网站。激活此帮助系统后，将触发弹出窗口，其中显示帮助内容 当用户在站点上导航时，通过使用cookie（我在窗口首次打开时设置cookie，在用户关闭窗口时清除cookie），我可以检测窗口是否仍然打开，并为新页面加载新的帮助内容 事实证明，将新内容加载到此弹出窗口的唯一方法是弹出一个具有相同名称的新页面（这样我们就不会到处打开多个弹出窗口），其中包含所需的内容 这在用户第一次触发弹出窗口时效果很好，但在那之后，当我尝试并自动尝试弹出窗口时，大多数浏览器都会出现问题 只

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

当用户在站点上导航时，通过使用cookie（我在窗口首次打开时设置cookie，在用户关闭窗口时清除cookie），我可以检测窗口是否仍然打开，并为新页面加载新的帮助内容

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

这在用户第一次触发弹出窗口时效果很好，但在那之后，当我尝试并自动尝试弹出窗口时，大多数浏览器都会出现问题

只是想知道是否有人对我如何才能让它正常工作有什么想法？”

更新 @抢劫

以下是我所拥有的：

页面1.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>
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);
 })();

（函数（）{
var failures=10*60；//在1分钟后取消轮询器，但不使用“opener”`
var poller=setInterval（函数（）{
试一试{
//尝试将当前位置对象发送到window.opener
window.opener.setHelperWindow（位置）；
}捕获（e）{
如果（！window.opener&&failures--<0）clearInterval（轮询器）；
}
}, 100);
})();
不幸的是，这不起作用。应该发生的是，如果我从Page1弹出打开Helper页面，然后转到Page2.html，显示Help1.html内容的弹出窗口将切换到Help2.html

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

如果您的整个网站托管在同一个域中，您可以使用
window.opener
属性，并在页面上进行一些调整

  • 主：声明变量
    windowLocation
    ，函数
    setHelperWindow
    和
    popup
  • 主弹出窗口：打开一个新窗口，并在变量
    windowLocation
  • Helper窗口：创建一个轮询器，它尝试调用
    窗口的
    setHelperWindow
    。opener
    对象。如果
    窗口开启器
    窗口已关闭，轮询器将终止
    • 由于
    windowLocation
    变量一直在更新（在使用
    window.open（）
    或通过弹出窗口中的轮询器功能后），因此被弹出窗口阻止程序阻止的可能性大大降低

    注意：两个脚本都必须包含在每个主页面和辅助页面中：

    Helper.js 示例：用法（主）
    像您所做的那样为窗口指定名称应该是可行的，例如

    window.open('help1.html', 'help');
    然后，例如，当第2页加载时

    $(function () {
    window.open('help2.html', 'help');
});
    请记住，弹出窗口阻止程序将停止此行为，除非您添加异常。例如，在chrome中，发动机罩下的选项>>内容设置>>弹出窗口>>管理异常

    免责声明：我不喜欢使用弹出窗口，我会使用一个lightsout box作为您的在线帮助，通过ajax请求加载内容。

    我认为只有他保持在同一页面上，这才对他有效。除非他的站点完全由ajax驱动，否则当他导航到另一个页面时，他将失去winHelper的价值。一旦我离开窗口，我就失去了上下文。@TonyLeeper@vdh_ant查看我的更新答案。我已经创建了一个更可靠的解决方案，它结合了
    window.open（url，“name”）
    和我新引入的
    window.opener
    @Rob更新了上面的问题，我尝试了一下这里的内容。@vdh\u我当前的方法包括一个活动主页和一个弹出窗口。当特定主页的内容发生变化时，该弹出窗口仍将由同一“主”窗口中的主页访问。我同意您对lightbox的说法，但用户希望的体验是在一个窗口中获得帮助，并在另一个窗口中导航。@vdh好吧，正如我所说的，使用上述方法应该可以工作，但我怀疑你的问题与弹出窗口拦截器有关。尝试为您的站点添加一个例外以始终允许弹出窗口。德国劳埃德船级社。 
    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 
 }

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

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

     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>

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

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