Question

Firefox会在标签恢复后触发我的webapp中的更改事件。

在Firefox中重新加载相同的URL时没有问题，在页面加载时不会触发onchange事件，自上次访问以来所有更改的值都会正确显示。

但是当重新打开具有相同URL的同一页面时，关闭Firefox并重新打开带有“已恢复选项卡”的页面（从Firefox选项“上次显示我的窗口和选项卡”）后，它将为所有人启动onchange事件自上次访问以来已更改的值。

实际工作流程重现问题：

我的更新事件在后台（JavaScript / AJAX）并被触发与onchange事件;
Firefox设置“上次显示我的窗口和标签”已启用;
更改页面中的某些值（选择字段）;
关闭Firefox;
在其他浏览器或计算机上打开相同的网址，并更改一些值;
重新打开Firefox，选择包含该页面的标签，重新加载并重新启动更改事件，以便自上次访问后更改所有值。

尝试使用完全不同的页面（不是由我创建并使用其他脚本库和东西）重现此行为，结果是相同的，它始终触发onchange事件。

Chrome没有使用“恢复标签”选项执行此操作。

为什么要点击更改事件？我该如何预防？

Answer 1

有关如何根据需要的结果处理此问题的一些建议。请注意，这是在我的机器上测试的，行为可能会有所不同。他们似乎工作的方式是Firefox尝试恢复用户输入的数据。因此，它会修改页面，触发change event。此事件与用户触发的事件略有不同。它是UIEvent，而用户触发的是Event。此事件为cancelable，并在window load事件之前触发。所以这给出了几种方法来解决这个问题。我将以一个选择元素为例。

如果您希望select在窗口关闭之前保持输入值，但不触发onchange事件，则可以在window.onload上设置onchange调用。像这样：

window.onload = function(){
     element.onchange = function(){

由于select的设置发生在onload之前，因此此特定更改不会触发您的onchange功能。

其他方法是通过设置条件验证元素是否可取消来定位不要触发的行为。如果它是cancelable，则表示它是从恢复会话中调用的，不会触发内部的内容。像这样：

element.onchange = function(e){
         if(e.cancelable == true){

其他方式，清除所有数据将是设置document.onchange事件并在事件为cancelable时重新加载页面。像这样：

 document.onchange = function(e){
        if(e.cancelable == true){
            window.location = window.location
             }
      }

当然，您需要确保在页面中没有调用任何其他可取消的更改事件。

编辑：

为了澄清触发事件的顺序，请参阅此jsfiddle，而不是iframe，iframes的行为似乎有所不同，因此如果您有iframe，则可能会更复杂一些。但是如果没有iframe，您将看到根据您的互动触发不同事件的方式：

 document.onchange = function (e) {
      //this will be triggered on restore before the window load event           
      alert('restore onchange called, e.cancelable = ' + e.cancelable)
 }


 window.onload = function (e) {
     //You'll see that on restore, this will be triggered but after page has been updated
     alert('window load called')
     document.onchange = function () {
         //This onchange will be called normally, not on restore
         alert('after onload change, e.cancelable = ' + e.cancelable)
     }

 }

http://fiddle.jshell.net/nozp9uhk/6/show/

Answer 2

Firefox在加载页面时会缓存您的文件，因此当您还原选项卡时，缓存值与新缓存值之间的差异可能会触发更改事件。

恢复选项卡时尝试清除缓存。我认为有两种方法可以做到这一点：

致电window.location.reload(true)重新加载当前页面

或

更改初始化onchange事件的JavaScript文件的名称：

<script language="JavaScript" type="text/javascript" src="yourscript.js?n=1"></script>

这（？n = 1）将强制Firefox加载文件的新副本＆＃34; yourscript.js＆＃34;

Firefox在选项卡恢复后触发onchange事件

2 个答案: