js怎样实现页面返回确认 js页面返回确认弹窗的2种实现方式

// confirm-leave.js
export default {
  mounted() {
    this.confirmLeaveSetup();
  },
  beforeDestroy() {
    this.confirmLeaveTeardown();
  },
  methods: {
    confirmLeaveSetup() {
      window.addEventListener('beforeunload', this.beforeunloadHandler);
      window.addEventListener('popstate', this.popstateHandler);
      history.pushState(null, null, document.URL); // 初始化状态
    },
    confirmLeaveTeardown() {
      window.removeEventListener('beforeunload', this.beforeunloadHandler);
      window.removeEventListener('popstate', this.popstateHandler);
    },
    beforeunloadHandler(event) {
      if (this.shouldConfirmLeave()) { // 根据你的逻辑判断是否需要提示
        const confirmationMessage = "您确定要离开此页面吗？未保存的数据将会丢失！";
        event.returnValue = confirmationMessage;
        return confirmationMessage;
      }
    },
    popstateHandler(event) {
      if (this.shouldConfirmLeave()) {
        history.pushState(null, null, document.URL); // 阻止跳转
        if (!confirm("您确定要离开此页面吗？未保存的数据将会丢失！")) {
          // 用户取消离开
          return;
        } else {
          history.back(); // 允许跳转
        }
      } else {
        history.back(); // 允许跳转
      }
    },
    shouldConfirmLeave() {
      // 在这里实现你的逻辑，判断是否需要提示用户
      // 例如：
      return this.formIsDirty; // formIsDirty 是一个组件内部的 data 属性，表示表单是否被修改过
    }
  }
};

import confirmLeave from './confirm-leave.js';

export default {
  mixins: [confirmLeave],
  data() {
    return {
      formIsDirty: false,
      // ... 其他数据
    };
  },
  // ... 其他组件选项
  watch: {
    formData: { // 假设 formData 是你的表单数据
      handler() {
        this.formIsDirty = true; // 当表单数据发生变化时，设置 formIsDirty 为 true
      },
      deep: true
    }
  }
};

import React, { useState, useEffect } from 'react';

function MyComponent() {
  const [isDirty, setIsDirty] = useState(false);

  useEffect(() => {
    const beforeUnloadHandler = (event) => {
      if (isDirty) {
        event.preventDefault();
        event.returnValue = "您确定要离开此页面吗？未保存的数据将会丢失！";
        return "您确定要离开此页面吗？未保存的数据将会丢失！";
      }
    };

    const popstateHandler = () => {
      if (isDirty) {
        window.history.pushState(null, null, document.URL); // 阻止跳转
        if (!window.confirm("您确定要离开此页面吗？未保存的数据将会丢失！")) {
          // 用户取消离开
          return;
        } else {
          window.history.back(); // 允许跳转
        }
      } else {
        window.history.back(); // 允许跳转
      }
    };

    window.addEventListener('beforeunload', beforeUnloadHandler);
    window.addEventListener('popstate', popstateHandler);
    window.history.pushState(null, null, document.URL); // 初始化状态

    return () => {
      window.removeEventListener('beforeunload', beforeUnloadHandler);
      window.removeEventListener('popstate', popstateHandler);
    };
  }, [isDirty]); // 依赖 isDirty，当 isDirty 变化时，重新注册事件监听器

  // ... 组件逻辑

  return (
    <div>
      {/* ... 组件内容 */}
      <input type="text" onChange={() => setIsDirty(true)} /> {/* 模拟表单输入 */}
    </div>
  );
}

export default MyComponent;

import { Component, HostListener } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-my-component',
  templateUrl: './my-component.component.html',
  styleUrls: ['./my-component.component.css']
})
export class MyComponentComponent {
  isDirty: boolean = false;

  constructor(private router: Router) {
    // 监听 popstate 事件
    this.router.events.subscribe((event) => {
      if (event.constructor.name === "NavigationStart") {
        if (this.isDirty && !window.confirm("您确定要离开此页面吗？未保存的数据将会丢失！")) {
          this.router.navigate([this.router.url]); // 阻止跳转，重新导航到当前页面
        }
      }
    });
    window.history.pushState(null, null, window.location.href); // 初始化状态
  }

  @HostListener('window:beforeunload', ['$event'])
  beforeUnloadHandler(event: BeforeUnloadEvent) {
    if (this.isDirty) {
      event.preventDefault();
      event.returnValue = "您确定要离开此页面吗？未保存的数据将会丢失！";
      return "您确定要离开此页面吗？未保存的数据将会丢失！";
    }
  }

  // ... 组件逻辑
  onInputChange() {
    this.isDirty = true;
  }
}