在 pageunload 上使用 devexpress 自定义确认弹出窗口

Question

所以我一直在尝试在页面卸载之前提示确认，但我不想要这个默认的 ok 取消浏览器确认弹出窗口，所以按照有关如何执行此操作的示例，我一直在尝试将其替换为没有成功的 Devexpress 弹出窗口或确认对话框，我是 javascript 的新手，并没有真正理解导致问题的原因。

          function confirmExit(data){
           setTimeout(function (){
           var result =  DevExpress.ui.dialog.confirm("Are you sue","Confirm");
           result.done(function (retVal){
         
                
            if (retVal == true) {
              
                return true;
            }
            else {
                window.stop();
                return false;
            }
       
           });

           });

      }
       $(window).bind('beforeunload',  confirmExit);

正常确认和 devexpress 弹出窗口或确认对话框之间的区别在于，后来 returns 一个承诺.. 但由于某些原因，上面的代码甚至没有阻止页面卸载。

任何指导和帮助将不胜感激。

Answer 1

坏消息，您正在寻找的东西无法通过 beforeunload 事件完成。我在下面向您展示了一个可行的代码。以下代码将显示浏览器的默认警报，其中包含消息“如果退出，现有更改将丢失”或类似内容。这是因为只有当您与页面交互然后想要退出时才会触发该事件。

      window.addEventListener("beforeunload", (e) => {
        //console.log(e)
        let dialogText = "something";
        e.returnValue = dialogText;
        return dialogText;
      });

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <a href="./test.html">exit</a>
  </body>
</html>

每种浏览器对此事件的处理方式略有不同，但总之。如果你最后不 return 它将不起作用。仅显示自定义消息是不可能的。您可以在此处找到更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

更新

如果您希望在用户单击 link 时显示警告消息，您可以执行以下操作。创建一个按钮并将其样式设置为 link。将按钮绑定到将打开自定义模式的单击事件。并在模式的确认按钮中分配一个重定向到目标页面的点击事件。这是 bootstrap:

的示例

      function exit(){
        window.location.replace("")
      }

<!DOCTYPE html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />

    <!-- Bootstrap CSS -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
      crossorigin="anonymous"
    />

    <title>Hello, world!</title>
  </head>
  <body>
    <!-- Button trigger modal -->
    <a
      type="button"
      class="fs-2"
      title=""
      data-bs-toggle="modal"
      data-bs-target="#exampleModal"
    >
      Go to a third party page
    </a>

    <!-- Modal -->
    <div
      class="modal fade"
      id="exampleModal"
      tabindex="-1"
      aria-labelledby="exampleModalLabel"
      aria-hidden="true"
    >
      <div class="modal-dialog">
        <div class="modal-content">
          <div class="modal-header">
            <h5 class="modal-title" id="exampleModalLabel">Personalized Message</h5>
            <button
              type="button"
              class="btn-close"
              data-bs-dismiss="modal"
              aria-label="Close"
            ></button>
          </div>
          <div class="modal-body">Are you sure","Confirm</div>
          <div class="modal-footer">
            <button
              type="button"
              class="btn btn-secondary"
              data-bs-dismiss="modal"
            >
              Close
            </button>
            <button type="button" class="btn btn-primary" onclick="exit()">Confirm and Exit</button>
          </div>
        </div>
      </div>
    </div>

    <!-- Optional JavaScript; choose one of the two! -->

    <!-- Option 1: Bootstrap Bundle with Popper -->
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM"
      crossorigin="anonymous"
    ></script>
    

    <!-- Option 2: Separate Popper and Bootstrap JS -->
    <!--
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.2/dist/umd/popper.min.js" integrity="sha384-IQsoLXl5PILFhosVNubq5LC7Qb9DXgDA9i+tQ8Zj3iwWAwPtgFTxbJ8NT4GN1R8p" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.min.js" integrity="sha384-cVKIPhGWiC2Al4u+LWgxfKTRIcfu0JTxR+EQDz/bgldoEyl4H0zUF0QKbrJ0EcQF" crossorigin="anonymous"></script>
    -->
  </body>
</html>

这是一个基本的想法。您可以创建代码来对您网站上的所有 link 执行此操作，也可以只对一个

执行此操作。

在 pageunload 上使用 devexpress 自定义确认弹出窗口

using a devexpress custom confirm popup on pageunload

javascript

devexpress

devextreme

更新