有没有办法为AJAX表单做类似于onbeforeunload的事情？

不幸的是，我们正处于一种情况，我们必须使用自制的温泉式发动机来劫持所有的导航，并通过ajax来完成。有没有办法为AJAX表单做类似于onbeforeunload的事情？

我正在寻找一种方式，能够将标签添加到form，也许是这样的：

<form data-confirm-unsaved=""></form>

这应该引起绑定到这个form的卸载，无论是实际的整体页面卸载（如某人关闭了标签页或输入URL）或点击任何被劫持的导航元素......但我不希望在提交/保存form时触发它。

我有什么不工作的代码开始概要：

$('[data-confirm-unsaved]').on('beforeunload', function (e) { 
     let isUnload = true; 
     let message = $(this).attr('[data-confirm-unsaved]'); 
     if (message == '') 
      message = "This data is unsaved. Are you certain that you want to cancel?"; 

     if (isFormDirty($(this))) 
      isUnload = confirm(message); 

     if (isUnload) 
      e.preventDefault(); 
    });

我当然可以在beforeunload事件不绑定到form ......只有window，我能得到怎样的一些线索我会去做这个吗？

预期的结果是，当form以除提交之外的其他方式卸载时，如果脏输入确实出现，如果他们确实想要这样做。

来源

2017-04-21 Serj Sagan

什么是预期的结果？ – guest271314

我的第一个想法是在你所谓的家庭酿造，类似温泉的引擎中进行所需的更改*家庭酿造建议你有“源代码” - 即没有缩小或丑化或混淆 –

请参阅编辑预期结果和我可以修改自制引擎。 –

您可以使用MutationObserver连接到<body>与childList选项设置为true，在MutationEvent，检查是否<form>被删除节点。

<body> 
 
    <form id="form"> 
 
    <input> 
 
    </form> 
 
    <script> 
 
    const form = document.getElementById("form"); 
 
    
 
    const observer = new MutationObserver(([{removedNodes}]) => { 
 
     
 
     if (removedNodes.length) { 
 
     // do stuff if `form` is removed from `document.body` 
 
     checkRemovedNodes: for (const node of removedNodes) { 
 
      if (node === form) { 
 
      console.log(`${node.tagName}#${node.id} removed from document`); 
 
      break checkRemovedNodes; 
 
      } 
 
     } 
 
     } 
 

 
    }); 
 
    // remove `form` from `document` in `3000` milliseconds 
 
    observer.observe(document.body, { 
 
     childList: true 
 
    }); 
 

 
    setTimeout(() => document.body.removeChild(form), 3000); 
 
    </script> 
 
</body>

来源

2017-04-21 05:19:15 guest271314

有没有办法为AJAX表单做类似于onbeforeunload的事情？

回答

相关问题