Javascript 仅在浏览器关闭时通知用户

我试图在用户关闭或重新加载页面时实现通知

function unloadPage(){
    return "Your changes will not be saved.";
}
window.onbeforeclose = unloadPage;

这很好。但问题是，每当进行导航时都会发生这种情况。这可能是页面刷新、表单提交、超链接单击或任何导航。我只想使用此代码来刷新和关闭浏览器。我知道如何设置标志并检查它。

---

但是我必须把它集成到一个大的应用程序中。所以很难在每个页面中添加代码。所以有一个简单的方法。

---

是否有方法捕获刷新或浏览器同步以便使用它。

请注意，在代码中，您使用的是

onbeforeclose

，但事件名称是

beforeunload

，因此属性是

onbeforeunload

，而不是

onbeforeclose

我只想将此代码用于浏览器刷新和关闭。是否有一种方法可以捕获刷新或浏览器余弦，以便可以使用它

不可以。相反，您必须捕获每个链接和表单提交，并设置一个标志，告诉您的

onbeforeunload

处理程序不要返回字符串，或者删除

onbeforeunload

处理程序（可能该标志更干净）

例如：

var warnBeforeClose = true;
function unloadPage(){
    if (warnBeforeClose) {
        return "Your changes will not be saved.";
    }
}
window.onbeforeunload = unloadPage;

// ...when the elements exist:
$("a").click(dontWarn);
$("form").submit(dontWarn);
function dontWarn() {
    // Don't warn
    warnBeforeClose = false;

    // ...but if we're still on the page a second later, set the flag again
    setTimeout(function() {
        warnBeforeClose = true;
    }, 1000);
}

或不带

设置超时

（但仍有超时）：

---

---

2017年更新：还要注意，至少在几年前，浏览器不会显示您返回的消息；他们只是使用您返回的内容而不是

null

作为标志来显示自己的内置消息。

请注意，在您的代码中，您使用的是

onbeforeclose

，但事件名称是

beforeuload

，因此属性是

onbeforeuload

，而不是

onbeforeclose

我只想将此代码用于浏览器刷新和关闭。是否有一种方法可以捕获刷新或浏览器余弦，以便可以使用它

不可以。相反，您必须捕获每个链接和表单提交，并设置一个标志，告诉您的

onbeforeunload

处理程序不要返回字符串，或者删除

onbeforeunload

处理程序（可能该标志更干净）

例如：

var warnBeforeClose = true;
function unloadPage(){
    if (warnBeforeClose) {
        return "Your changes will not be saved.";
    }
}
window.onbeforeunload = unloadPage;

// ...when the elements exist:
$("a").click(dontWarn);
$("form").submit(dontWarn);
function dontWarn() {
    // Don't warn
    warnBeforeClose = false;

    // ...but if we're still on the page a second later, set the flag again
    setTimeout(function() {
        warnBeforeClose = true;
    }, 1000);
}

或不带

设置超时

（但仍有超时）：

---

2017年更新：还要注意，至少在几年前，浏览器不会显示您返回的消息；他们只是使用您返回的内容而不是

null

作为标志来显示自己的内置消息。

检查

它提供有关如何在卸载前处理事件的信息

这个想法是在页面上有一个全局标志。对字段进行任何更改时，此标志设置为true。单击“保存”按钮时，需要将此标志设置为false

在“onbeforeunload事件”中，检查标志是否为真，然后相应地显示消息

var needToConfirm = true;

window.onbeforeunload = confirmExit;
function confirmExit()
{
    if (needToConfirm)
    {
        // check on the elements whether any change has been done on the fields.
        // If any change has been done, then set message here.
    }
}

function saveClicked()
{
    needToConfirm = false;
}

检查

它提供有关如何在卸载前处理事件的信息

这个想法是在页面上有一个全局标志。对字段进行任何更改时，此标志设置为true。单击“保存”按钮时，需要将此标志设置为false

在“onbeforeunload事件”中，检查标志是否为真，然后相应地显示消息

var needToConfirm = true;

window.onbeforeunload = confirmExit;
function confirmExit()
{
    if (needToConfirm)
    {
        // check on the elements whether any change has been done on the fields.
        // If any change has been done, then set message here.
    }
}

function saveClicked()
{
    needToConfirm = false;
}

---

解决问题的一个简单方法是设置一个标志，然后仅在该标志有效时调用函数。在这种情况下，您可以将锚定标记、F5键和表单提交按钮单击绑定到将标志设置为false的事件。因此，只有在上述情况未发生时，您的警报栏才会可见：）

以下是脚本：

var validNavigation = false;

function endSession() {
  // Browser or broswer tab is closed
  alert("bye");
}

function wireUpEvents() {

  window.onbeforeunload = function() {
      if (!validNavigation) {
         endSession();
      }
  }

  // Attach the event keypress to exclude the F5 refresh
  $(document).bind('keypress', function(e) {
    if (e.keyCode == 116){
      validNavigation = true;
    }
  });

  // Attach the event click for all links in the page
  $("a").bind("click", function() {
    validNavigation = true;
  });

  // Attach the event submit for all forms in the page
  $("form").bind("submit", function() {
    validNavigation = true;
  });

  // Attach the event click for all inputs in the page
  $("input[type=submit]").bind("click", function() {
    validNavigation = true;
  });

}

// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
  wireUpEvents();  
});

---

解决问题的一个简单方法是设置一个标志，然后仅在该标志有效时调用函数。在这种情况下，您可以将锚定标记、F5键和表单提交按钮单击绑定到将标志设置为false的事件。因此，只有在上述情况未发生时，您的警报栏才会可见：）

以下是脚本：

var validNavigation = false;

function endSession() {
  // Browser or broswer tab is closed
  alert("bye");
}

function wireUpEvents() {

  window.onbeforeunload = function() {
      if (!validNavigation) {
         endSession();
      }
  }

  // Attach the event keypress to exclude the F5 refresh
  $(document).bind('keypress', function(e) {
    if (e.keyCode == 116){
      validNavigation = true;
    }
  });

  // Attach the event click for all links in the page
  $("a").bind("click", function() {
    validNavigation = true;
  });

  // Attach the event submit for all forms in the page
  $("form").bind("submit", function() {
    validNavigation = true;
  });

  // Attach the event click for all inputs in the page
  $("input[type=submit]").bind("click", function() {
    validNavigation = true;
  });

}

// Wire up the events as soon as the DOM tree is ready
$(document).ready(function() {
  wireUpEvents();  
});

（运行或刷新小提琴以查看警报

onbeforeunload（）

事件消息，然后单击链接“kk”，它不会显示

onbeforeunload（）

事件消息。请在您的网页中尝试）

我为您提供了一个解决方案，您不必向每个标记和所有标记添加onclick事件

只需将此添加到页面上的任何位置

<input type="hidden" value="true" id="chk"/>

并将此代码添加到文档头标记中

<script>
window.onbeforeunload = confirmExit;
function confirmExit()
{
   if(document.getElementById("chk").value=="true")
   {
      return "Your changes will not be saved.";
   }
}

document.onclick = myClickHandler;
function myClickHandler() {
      document.getElementById("chk").value="false";
    }
<script>

window.onbeforeunload=确认退出；
函数confirmExit（）
{
if（document.getElementById（“chk”）.value==“true”）
{
return“您的更改将不会被保存。”；
}
}
document.onclick=myClickHandler；
函数myClickHandler（）{
document.getElementById（“chk”）.value=“false”；
}

希望这有帮助

谢谢你

（运行或刷新小提琴以查看警报

onbeforeunload（）

事件消息，然后单击链接“kk”，它不会显示

onbeforeunload（）

事件消息。请在您的网页中尝试）

我为您提供了一个解决方案，您不必向每个标记和所有标记添加onclick事件

只需将此添加到页面上的任何位置

<input type="hidden" value="true" id="chk"/>

并将此代码添加到文档头标记中

<script>
window.onbeforeunload = confirmExit;
function confirmExit()
{
   if(document.getElementById("chk").value=="true")
   {
      return "Your changes will not be saved.";
   }
}

document.onclick = myClickHandler;
function myClickHandler() {
      document.getElementById("chk").value="false";
    }
<script>

window.onbeforeunload=确认退出；
函数confirmExit（）
{
if（document.getElementById（“chk”）.value==“true”）
{
return“您的更改将不会被保存。”；
}
}
document.onclick=myClickHandler；
函数myClickHandler（）{
document.getElementById（“chk”）.value=“false”；
}

希望这有帮助

---

谢谢

您无法捕获浏览器关闭请求。但是，当您知道表单将要提交，或者单击链接时，可以删除onbeforeunload处理程序。d您无法捕获浏览器关闭请求。但是，当您知道表单将被提交时，可以删除onbeforeunload处理程序