是否有人知道如何使Javascript'onunload'功能起作用?

时间:2015-10-11 00:24:09

标签: javascript

我查看了所有其他Javascript'onunload'问题&我想我已经理解了它们,但我似乎仍然无法使这个功能起作用。

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

如果我点击红色的Close Window gumdrop,窗口会关闭,但不会访问和执行'onunload'功能。

但是......如果我重新加载页面,就会访问并执行'onunload'功能。

这很好,但我真正要做的是在点击红色Window Close gumdrop之后执行一些代码。

我的代码根本不起作用。

我要么误解了某些东西,要么我错过了什么。

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

这是我编写的测试源,看看我是否可以使用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>

2 个答案:

答案 0 :(得分:0)

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

如果你真的想要一个用于调试目的的对话框,你可以通过从你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中所示。

答案 1 :(得分:0)

以下是我提出的问题的答案。

我得到了很多来自'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>