javascript判断网页是关闭还是刷新

要判断网页是被关闭还是被刷新,需要使用onbeforeunload事件和event.currentTarget.performance.navigation.type属性。

onbeforeunload事件会在页面关闭或者刷新时被触发,可以作为判断依据。而event.currentTarget.performance.navigation.type属性在页面刷新时值为1,在页面关闭时值为2。

下面是具体的实现步骤:

  1. 在页面中添加onbeforeunload事件。
    <script>
        window.addEventListener('beforeunload',function(event){
            if(event.currentTarget.performance.navigation.type == 1) {
                // 页面是通过刷新退出的
            } else if(event.currentTarget.performance.navigation.type == 2) {
                // 页面是通过关闭退出的
            }
        });
    </script>
  1. 在事件中判断event.currentTarget.performance.navigation.type的值,从而得知页面是通过刷新退出还是通过关闭退出。

这里提供两个简单的示例:

示例一

<!DOCTYPE html>
<html>
<head>
    <title>Javascript判断网页是关闭还是刷新</title>
</head>
<body>
    <p>测试网页是否关闭或者刷新。</p>
    <button>刷新页面</button>
    <script>
        window.addEventListener('beforeunload',function(event){
            if(event.currentTarget.performance.navigation.type == 1) {
                alert('页面是通过刷新退出的');
            } else if(event.currentTarget.performance.navigation.type == 2) {
                alert('页面是通过关闭退出的');
            }
        });

        document.querySelector('button').addEventListener('click', function(event){
            location.reload();
        });
    </script>
</body>
</html>

示例二

<!DOCTYPE html>
<html>
<head>
    <title>Javascript判断网页是关闭还是刷新</title>
</head>
<body>
    <p>测试网页是否关闭或者刷新。</p>
    <form method="post">
        <input type="text" name="username" placeholder="用户名">
        <input type="password" name="password" placeholder="密码">
        <br>
        <button type="submit">登录</button>
    </form>
    <script>
        window.addEventListener('beforeunload',function(event){
            if(event.currentTarget.performance.navigation.type == 1) {
                alert('页面是通过刷新退出的');
            } else if(event.currentTarget.performance.navigation.type == 2) {
                alert('页面是通过关闭退出的');
            }
        });
    </script>
</body>
</html>

这两个示例分别展示了在按钮点击和表单提交时,如何判断网页是被关闭还是被刷新。需要注意的是,在表单提交时,如果需要在提交前确认是否退出,可以使用window.confirm方法来实现。

本站文章如无特殊说明,均为本站原创,如若转载,请注明出处:javascript判断网页是关闭还是刷新 - Python技术站

(0)
上一篇 2023年6月11日
下一篇 2023年6月11日

相关文章

  • JavaScript中好用的解构用法详解

    JavaScript中好用的解构用法详解 什么是解构 在JavaScript中,解构是一种使得能够从数组或者对象中快速提取值、封装成一个变量或变量组的语法。 数组解构 数组的解构就是对数组的值进行“一一对应的提取”操作 基本用法 基本语法如下: let [a, b, c] = [1, 2, 3]; console.log(a); //1 console.lo…

    JavaScript 2023年5月18日
    00
  • javascript 中关于array的常用方法详解

    下面是关于JavaScript中关于数组常用方法的详解: 1. 数组的创建 在JavaScript中,创建一个数组可以使用以下两种方式: 直接量法 使用直接量法,在中括号中添加元素来创建一个数组,例如: let fruits = [‘apple’, ‘banana’, ‘orange’]; 构造函数法 使用构造函数法,使用Array对象的构造函数来创建一个数…

    JavaScript 2023年5月27日
    00
  • JQuery以JSON方式提交数据到服务端示例代码

    先说一下什么是JSON格式数据,它可以被序列化成字符串并进行网络传输,而在服务端被反序列化成为一个对象。JSON数据格式对于前后端交互非常方便,而JQuery框架也为此提供了很好的支持。下面是一个示例代码,演示了如何使用JQuery将JSON格式的数据发送至服务端: //定义一个JSON数据 var data = { name: ‘John’, age: 2…

    JavaScript 2023年5月27日
    00
  • js实现一个猜数字游戏

    下面是JS实现猜数字游戏的完整攻略。 步骤 1. 随机生成一个数字 首先,我们需要随机生成一个1~100之间的数字作为游戏答案,可以使用Math.random()和Math.floor()函数来实现: let answer = Math.floor(Math.random() * 100) + 1; // 生成1~100之间的整数 2. 获取用户输入 然后,…

    JavaScript 2023年6月11日
    00
  • JS数组求和的几种常见方法总结

    我将为您详细讲解“JS数组求和的几种常见方法总结”的完整攻略。 一、直接求和 使用for循环遍历整个数组,将数组中的元素加起来,最后返回该数组的总和。 function sum(array) { var total = 0; for (var i = 0; i < array.length; i++) { total += array[i]; } re…

    JavaScript 2023年5月27日
    00
  • JavaScript常用标签和方法总结

    针对这个话题,我准备了以下完整攻略。 JavaScript常用标签和方法总结 标签 在JavaScript中,我们通常使用以下标签: \<script> – 嵌入JavaScript代码的标签,可以放在HTML的\<head>或\<body>中。 \<button> – 创建一个按钮元素,可以用JavaScri…

    JavaScript 2023年5月18日
    00
  • javascript bom是什么及bom和dom的区别

    BOM(Browser Object Model)是指浏览器对象模型,它提供了一组对象和方法,用于操作浏览器窗口、浏览器历史记录、浏览器地址栏等浏览器本身的属性和方法。而DOM(Document Object Model)是指文档对象模型,它提供了一组对象和方法,用于操作网页上的元素,如获取元素、修改元素样式、添加元素等。 BOM和DOM的区别在于,BOM对…

    JavaScript 2023年6月10日
    00
  • 详谈js遍历集合(Array,Map,Set)

    我来为你讲解如何用JavaScript遍历集合。 集合的遍历 在遍历集合之前,首先需要了解集合类型的基本特性。 JavaScript中常见的集合类型有Array、Map和Set。其中: Array是一种有序、可重复的数据集合,它可以通过下标或迭代器来访问其中的元素。 Map是一种关联数组,它保存了键值对,并且键可以是任意类型的数据,而值可以是任意类型的数据。…

    JavaScript 2023年5月27日
    00
合作推广
合作推广
分享本页
返回顶部