有没有人知道如何让Javascript的' onunload '功能的工作

Does ANYone know how to get the Javascript ‘onunload’ function to work?

本文关键字：onunload 功能 工作 没有人知道 Javascript      更新时间：2023-09-26

我已经看了所有其他Javascript ' onunload '问题&我想我已经理解了它们，但我似乎仍然无法使这个函数工作。

具体来说，我正在开发一个在苹果Safari浏览器下运行的应用程序，我试图捕捉通过点击Safari浏览器窗口左上角的红色窗口关闭胶点触发的窗口关闭事件。

如果我点击红色的Close Window 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>

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

如果你真的想要一个用于调试的对话框，你可以通过从你的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();

如果你的页面在不同的域，你可以轮询检查窗口何时关闭，如在这个答案。

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

我得到了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>

//Target Window.

<!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>
相关文章：