当有人试图关闭浏览器窗口/选项卡时进行管理答案

【问题标题】：Manage when someone tries to close the browser window/tab当有人试图关闭浏览器窗口/选项卡时进行管理
【发布时间】：2011-07-11 12:50:55
【问题描述】：

在我的 onbeforeunload 事件中，它询问用户是要离开页面还是留在页面上。当他们点击“留在页面上”时，我希望它然后将他们重定向到同一窗口中的另一个网页。这听起来很奇怪，但这就是我被分配去做的事情。基本上，主页播放一个视频 - 我认为广告是为了买东西，当他们关闭但决定留在页面上时，我们希望视频消失/停止播放并出现一些不同的信息（不同的“网页”）。有没有办法做到这一点，而不仅仅是显示/隐藏 div？我可以覆盖该功能吗？我目前正在尝试这样做（如下所示），但现在对话框根本没有出现。它在任何关于我做错了什么或如何完成此任务的想法之前都有效？

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>The Shocking Truth - Cabot Market Letter</title>

    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.1/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function() {
            $("#vid").show();
            $("#div2").hide();
        });
        var test = 1;
        function manipulatetest()
        {
            test = 2;
        }
    window.onbeforeunload = onbeforeunload_Handler;
    function onbeforeunload_Handler()
    {       if (test == 1){

                $("#vid").hide();
                $("#div2").show();
            var confirm = confirm("Would you like to stay on this page?");
            if (confirm == true) {
                window.location = "http://www.google.com";
                }

        }
}

</script>
</head>

<style type="text/css"> 

body {
    background-color: #e0e6e5;
}

#vid {  
    margin: 20px auto;
    width: 920px;
}

</style>


<body>

<div id="vid">
    <video width="920" height="540" autoplay preload controls>
      <source src="shockingtruth.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src="shockingtruth.webm" type='video/webm; codecs="vp8, vorbis"'>
      <source src="shockingtruth.ogv"  type='video/ogg; codecs="theora, vorbis"'>
      <object width="920" height="540" type="application/x-shockwave-flash"
        data="flowplayer-3.2.1.swf"> 
        <param name="movie" value="flowplayer-3.2.7.swf" /> 
        <param name="allowfullscreen" value="true" /> 
        <param name="flashvars" value='config={"clip": {"url": "http://www.cabot.net/videos/shocking-truth/shockingtruth.mp4", "autoPlay":true, "autoBuffering":true}}' /> 
        <p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p> 
      </object>
    </video>
</div>

<div id="div2">
    <video width="920" height="540" autoplay preload controls>
      <source src="shockingtruth.mp4"  type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"'>
      <source src="shockingtruth.webm" type='video/webm; codecs="vp8, vorbis"'>
      <source src="shockingtruth.ogv"  type='video/ogg; codecs="theora, vorbis"'>
      <object width="920" height="540" type="application/x-shockwave-flash"
        data="flowplayer-3.2.1.swf"> 
        <param name="movie" value="flowplayer-3.2.7.swf" /> 
        <param name="allowfullscreen" value="true" /> 
        <param name="flashvars" value='config={"clip": {"url": "http://www.cabot.net/videos/shocking-truth/shockingtruth.mp4", "autoPlay":true, "autoBuffering":true}}' /> 
        <p>Download video as <a href="pr6.mp4">MP4</a>, <a href="pr6.webm">WebM</a>, or <a href="pr6.ogv">Ogg</a>.</p> 
      </object>
    </video>
</div>

<p style="text-align: center;"><a href="http://www.cabot.net/info/cml/cmlld03.aspx?source=ed01" onclick="manipulatetest();">Click Here To Order</a></p>

</body>

【问题讨论】：

这听起来真的是有史以来最烦人的用户体验。
jQuery 不是为邪恶而设计的。 =P

标签： javascript asp.net html onbeforeunload

【解决方案1】：

一个肮脏的把戏是setTimeout，看看它是否还能运行：http://jsfiddle.net/FJ4LR/1/。

window.onbeforeunload = function() {
    setTimeout(function() {
        alert('You clicked stay.');
    }, 500);

    return 'Really?';
};

【讨论】：

好的，这很好用 - 当他们决定留在页面上时，我将如何处理它来做某事？
@OhMisterRabbit：不要发出警报，只需编写其他应该发生的代码即可。就像用 window.location = "http://www.google.com"; 替换它一样。
@OhMisterRabbit：是的，这正是我想说的。你能试试吗？
我试过了，但它只是关闭了页面。虽然我的老板有一些工作 - 我不完全确定他是如何做到的：/但是这个例子将有助于将来参考。谢谢！