Question

介绍/免责声明：是的，我知道这很糟糕。是的，我让客户知道我对此的看法。不，我永远不会在自己的网站上这样做。我讨厌这个概念。但是，在他或她的网站的测试版本中，有时您必须做您必须做的事情让客户自己查看用户体验是如何受到损害的。

还有一些合法的情况，例如功能很有用，例如防止数据丢失。如果您在发布问题或答案时意外导航到其他页面，StackOverflow会使用“退出弹出窗口”提示您保存数据。

话虽如此，让我们继续前进。

问题描述：

我正在运行一个JavaScript函数，位于Snipplr - Confirm Leaving Your Site Onbeforeunload。

window.onload = function(){

    var allowUnload = true;

    window.onbeforeunload = function(e){
        //allowUnload will allow us to see if user recently clicked something if so we wont allow the beforeunload.
        if(allowUnload){
            //message to be returned to the popup box.
            var message = 'Are you sure you want to leave this page message',
                e = e||window.event;
            if(e)
                e.returnValue=message; // IE
            return message; // Safari
        }
    };
    // We need this to allow us to see if user has clicked anywhere if user has clicked we wont allow beforeunload to run.
    document.getElementsByTagName('body')[0].onclick = function(){
        allowUnload = false;
        //setTimeout so we can reset allowUnload incase user didn't leave the page but randomly clicked.
        setTimeout(function(){ allowUnload = true; },100);
    };
};

如果用户单击页面上的超链接，则代码段会阻止“退出弹出窗口”显示。退出弹出窗口显示F5刷新以及用户离开站点时。这是期望的行为，只有一个例外。

如果我单击一个包含onclick事件的按钮，该事件将使用新链接替换parent.location，则会触发Exit Popup：

<input type="button" onclick="parent.location = '/test.html';" />

我需要在代码段中添加什么来阻止此按钮点击启动退出弹出窗口？

约束如下：

我无权访问该网站，只访问我的域上托管的JavaScript文件，用于部署主动聊天功能。
我无法突然修改onclick事件（直接编辑属性）。
我可以动态地修改onclick事件，但是当它们以后决定更改onclick属性时，它们不会被记录在案，并且可能会引起混淆。
我更愿意拦截onclick属性并添加到它，所以如果它被更改，将会识别更改。
这必须适用于IE7 +，FF，Chrome。
尽管我喜欢和推广JQuery，并且会成为第一个提出这样建议的人，不幸的是我不能在这里使用它。

Answer 1

经过几个小时的搜索和故障排除后，我找到了解决此问题的方法：

var button_element = document.getElementsByTagName('input')['button_name'];

// get old onclick attribute
var onclick = button_element.getAttribute("onclick");  

// if onclick is not a function, it's not IE7, so use setAttribute
if(typeof(onclick) != "function") { 
    button_element.setAttribute('onclick','allowUnload = false;' + onclick); // for FF,IE8,Chrome

// if onclick is a function, use the IE7 method and call onclick() in the anonymous     function
} else {
    button_element.onclick = function() { 
        allowUnload = false;
        onclick();
    }; // for IE7
}

在IE7中，getAttribute（“onclick”）返回一个函数，但在所有其他浏览器中，它只是一串文本。我不想使用eval，但感谢this answer on how to dynamically bind onclick events，我能够在所有浏览器中实现这一点。

我还必须通过检查onclick变量是否是一个确定使用哪种方法的函数来使用特征检测，因为这两种方法不兼容。

现在，当我点击IE7，IE8，IE9，FF和Chrome中的输入按钮时，页面会正确重定向而不显示“退出弹出窗口”。

参考文献：Why does an onclick property set with setAttribute fail to work in IE?

单击“输入”按钮时如何防止退出弹出窗口显示？

1 个答案: