Question

可悲的是，我们处于一种情况，我们必须使用家庭酿造，类似水疗的引擎，劫持所有导航并通过ajax进行。

我正在寻找一种方法，可以将标签添加到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，我能否得到一些关于如何做到这一点的线索？< / p>

预期的结果是，当form通过除提交之外的任何方式卸载时，如果他们真的想要这样做，那么输入就会显示确认信息。

Answer 1

您可以使用MutationObserver附加的<body> childList选项设置为true MutationEvent，检查<form>是否已删除节点

＆＃13;

<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>

＆＃13;

有没有办法为AJAX表单执行类似于onbeforeunload的操作？

1 个答案: