有沒有辦法爲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的事情？

回答

相關問題