有人知道如何让 Javascript 的“onunload”功能工作吗？答案

【问题标题】：Does ANYone know how to get the Javascript ‘onunload’ function to work?有人知道如何让 Javascript 的“onunload”功能工作吗？
【发布时间】：2016-01-08 16:58:20
【问题描述】：

我查看了所有其他 Javascript 的“onunload”问题，我想我已经理解了它们，但我似乎仍然无法让这个功能发挥作用。

具体来说，我正在开发一个在 Apple 的 Safari 浏览器下运行的应用程序，并且我试图捕捉通过单击 Safari 浏览器窗口最左上角的红色 Window Close gumdrop 触发的窗口关闭事件。

如果我点击红色的关闭窗口软糖，窗口会关闭，但不会访问和执行“onunload”功能。

但是……如果我重新加载页面，“onunload”函数就会被访问并执行。

这很好，但我真正想做的是在点击红色窗口关闭软糖后执行一些代码。

我的代码根本不起作用。

我要么误解了某些东西，要么遗漏了一些东西。

有没有人知道我错过了什么或做错了什么？

这是我写的测试源代码，看看我是否可以让 Javascript 的“onunload”函数工作：

<!DOCTYPE html>

<html>
    <head>
        <title>Window - 'onunload' Javascript function Test</title>
        <script>
          function WindowOnUnLoadTest ()
          { alert ("Entering … 'WindowOnUnLoadTest' …");}
          window.onunload=WindowOnUnLoadTest;
        </script>
     </head>
     <body onunload="WindowOnUnLoadTest()">
     </body>
</html>

20151024 这是编辑后的代码：

<!DOCTYPE html>

 <html> 
     <head>      
        <title>Window Open Test 3</title>
         <style>

            #Image_01_Closed
            {
                position    : absolute;
                left        : 16px;
                top         : 16px;
            }
        </style>
         <script>
            var URL_Set_Prefix                  = "file:///Users/simonwhelan/Desktop/WindowOpenTest3/";
            var File_PathName                   = "";
            var Window_01A_Closed_File_PathName =  URL_Set_Prefix + "Window-01A-Closed";
            var Window_01A_Open_File_PathName   =  URL_Set_Prefix + "Window-01A-Open"  ;
            var Window_01B_File_PathName        =  URL_Set_Prefix + "Window-01B-Open"  ;
            var Window_01B_HTML_File_PathName   =  URL_Set_Prefix + "Window-01B.html"  ;
            var Window_Open = false;
            var Window_01B  = null;

            function turnAnImageOnOrOff (imageArrayIndexNbr,
                                         id,
                                         src)
            {
                if (Window_Open === true)
                     { File_PathName = Window_01A_Closed_File_PathName; }
                else { File_PathName = Window_01A_Open_File_PathName  ; }

                document.getElementById(id).src = File_PathName;        
                open_Or_Close_A_Window (imageArrayIndexNbr); 
                Window_Open = !Window_Open; 
            }

            var current_Window_B_X_Position_Value = 8;
            var current_Window_B_Y_Position_Value = 8;

            function open_Or_Close_A_Window (imageArrayIndexNbr)
            {
                if (Window_Open === false)
                     {
                        Window_01B = window.open (Window_01B_HTML_File_PathName, 
                                                  "_blank", 
                                                    "top  = " + current_Window_B_X_Position_Value + ", " 
                                                  + "left = " + current_Window_B_Y_Position_Value); 
                     }
                else {  Window_01B.close(); };      

                File_PathName = URL_Set_Prefix
                               + Window_01B_HTML_File_PathName;                 
            } 
        </script>
    </head>

     <body>
        <img 
            id           = "Image_01_Closed" 
            src          = "Window-01A-Closed"
            alt          = "Window A-01 - Closed" 
            onclick      = "turnAnImageOnOrOff (0, id, src)"
            width        = "80" 
            height       = "80"
        >
    </body>
</html>


<!DOCTYPE html>

  <html>
      <head> 
        <title>Window B-01 Open</title>
          <style>
            #Page_Background
            {
                position    : absolute;
                left        : 8px;
                top         : 8px;
            }
         </style>

          <script>
            function WindowOnUnLoadTest ()
            {
                console.log("Entered WindowOnUnLoadTest");
                return "Done with WindowOnUnLoadTest";
            }
            window.onbeforeunload=WindowOnUnLoadTest;
        //    window.onunload=WindowOnUnLoadTest;
         </script>

     </head>

      <body>
        <img 
            id      = "Page_Background" 
            src     = "Window-01B-Open"
            alt     = "Window B-01 Open : Page Background" 
            width   = "80" 
            height  = "80"
        >
     </body>
 </html>

【问题讨论】：

由于某种原因 StackOverflow 剪掉了源代码的第 1 3 行和最后一行。
您需要在每行代码前加上四个空格，或者选择代码并单击{} 按钮 - 已为您修复
Javascript 函数onunload() 和onbeforeunload() 有很多限制。访问者不喜欢网站滥用这些功能来阻止访问者通过提醒东西、弹出一些东西等来阻止访问者离开。所以大多数浏览器都阻止使用这些功能来阻止用户在他们想要关闭网站时阻止他们:)
因此，不要发出警报，而是尝试打开浏览器控制台（分离它，否则关闭时会丢失控制台）并通过删除警报并添加 console.log ( 'unload triggered' ); 来编辑代码现在控制台应该显示它是否工作与否。
附带说明：请记住 onunload() 和 onbeforeunload() 不是可靠的函数！如果浏览器意外关闭（崩溃、网络中断、进程终止），这些函数将永远不会触发。

标签： javascript

【解决方案1】：

这是我提出的问题的答案。

在得到这个答案时，我从“CupawnTae”那里得到了很多帮助。

这是修改后的来源。我已经测试过了，它似乎确实有效。

// 源代码窗口。

<!DOCTYPE html>

 <html> 
   <head>
        <title>Window Open 4</title>
       <style>

            #Image_01_Closed
            {
                position    : absolute;
                left        : 16px;
                top         : 16px;
            }
      </style>
       <script>
var URL_Set_Prefix                  = "file:///Users/simonwhelan/Desktop/WindowOpenTest4/";
var Window_01A_Closed_File_PathName =  URL_Set_Prefix + "Window-01A-Closed";
var Window_01A_Open_File_PathName   =  URL_Set_Prefix + "Window-01A-Open";
var Window_01B_HTML_File_PathName   =  URL_Set_Prefix + "Window-01B.html";
var the_Current_id = "";
var Window_01B   = null;
var current_Window_B_X_Position_Value = 8;
var current_Window_B_Y_Position_Value = 8;

function handleAMouseClickOnAnImage (id,
                                     src)
{
    the_Current_id  = id;

    if ((Window_01B == null) || (Window_01B.closed == true))
         { 
            document.getElementById(id).src = Window_01A_Open_File_PathName;
            Window_01B = window.open (Window_01B_HTML_File_PathName, 
                                      "_blank", 
                                        "top  = " + current_Window_B_X_Position_Value 
                                      + ", " 
                                      + "left = " + current_Window_B_Y_Position_Value); 
         }
    else {  Window_01B.close(); };

    the_Current_id  = id;
}

function onChildClose ()
{
    document.getElementById(the_Current_id).src = Window_01A_Closed_File_PathName;
} 
      </script>   
  </head> 
   <body>

        <img 
            id           = "Image_01_Closed" 
            src          = "Window-01A-Closed"
            alt          = "Window A-01 - Closed" 
            onclick      = "handleAMouseClickOnAnImage (id, src)"
            width        = "80" 
            height       = "80"
        >
  </body>     
</html>

// 目标窗口。

<!DOCTYPE html>

  <html>
      <head> 
        <title>Window B-01 Open</title>
          <style>
            #Page_Background
            {
                position    : absolute;
                left        : 8px;
                top         : 8px;
            }
         </style>
          <script>
    function WindowOnUnLoadTest ()
    {
        window.opener.onChildClose();

        console.log("Entered WindowOnUnLoadTest");
        return "Done with WindowOnUnLoadTest";
    }
//    window.onbeforeunload=WindowOnUnLoadTest;
    window.onunload=WindowOnUnLoadTest;
         </script>

     </head>
      <body>
        <img 
            id      = "Page_Background" 
            src     = "Window-01B-Open"
            alt     = "Window B-01 Open : Page Background" 
            width   = "80" 
            height  = "80"
        >
     </body>
 </html>

【讨论】：

@CupawnTae ...感谢您的建议...我以后会尽量注意它...

【解决方案2】：

您没有看到警报的原因是浏览器不允许您在这些事件处理程序中弹出警报。但是你仍然可以做一些事情。

如果您真的想要一个用于调试目的的对话框，您可以通过从onbeforeunload 函数返回一个字符串来实现 - 您将获得一个显示文本的确认对话框。例如，试试这个：

<script>
    function WindowOnUnLoadTest ()
    {
        console.log("Entered WindowOnUnLoadTest");
        return "Done with WindowOnUnLoadTest";
    }
    window.onbeforeunload=WindowOnUnLoadTest;
</script>

（请注意，您实际上应该使用window.addEventListener()，而不是分配给window.onbeforeunload）

事实上，您几乎可以使用现有代码 - 只要它们在同一个域中，您就可以简单地从您的 onbeforeunload 处理程序调用父窗口中的函数。

尝试向您的父脚本添加另一个函数：

function onChildClose() {
  // here you can update your main page's state, change the image etc.
  alert("[debug] child closed");
}

然后在您的子页面的WindowOnUnLoadTest 函数中，执行以下操作：

window.opener.onChildClose();

如果您的页面位于不同的域中，您可以轮询以检查窗口何时关闭，如this answer。

【讨论】：

嗨 CupawnTae：感谢您的回复。我很抱歉没有早点回复你……我一直忙于其他事情。将来我会将修改后的源附加到原始姿势。
嗨 CupawnTae ：我不确定我是否已经清楚地传达了为什么将“alert”和“console.log”语句放在“onunload”和“onpreunload”函数中。我将这些函数调用放在“onunload”和“onpreunload”中的唯一原因只是为了验证这些函数是否被调用。我在源浏览器窗口中使用“按钮”来打开目标浏览器窗口。如果我第二次单击源窗口中的“按钮”，它会关闭目标窗口并将按钮切换到“关闭”状态。效果很好。
当我点击目标窗口上的“Red Gumdrop”关闭按钮时出现问题。我说“‘Red Gumdrop’关闭按钮”是因为我在 Mac OS 10.9.5 上的 Safari 9.0 下开发。目标窗口可以正常关闭，但当然，源窗口上的“按钮”仍处于“打开”状态，此时它实际上应该翻转到“关闭”状态，以便与目标窗口保持同步。跨度>
如果“onunload”可以拾取“鼠标关闭”事件或单击 Red Gum Drop 时实际调用的任何函数，那么我可以使用“window.opener”函数关闭“按钮” ' 与源窗口上的目标窗口关联，以确保目标窗口和源窗口上的关联按钮同步。事实上，我实际上并没有使用 Source 窗口上的按钮。相反，我只是使用一对图像，当“mouseclick”功能发现在 2 个图像中的一个上发生鼠标单击时，我只是在它们之间切换。
我希望前面的内容能够阐明我真正想要做的事情。我已将修改后的源附加到原始帖子中，以便您查看我的实际代码。感谢您的所有帮助，如果您对我如何在目标窗口而不是源窗口的 Javascript 源代码中获取任何想法或建议，我将不胜感激。