window.onload 和 window.beforeunload 在尝试更新和显示变量时不起作用

Posted 2023-02-22

技术标签:

【中文标题】window.onload 和 window.beforeunload 在尝试更新和显示变量时不起作用【英文标题】：window.onload and window.beforeunload not working while trying to update and display a variable 【发布时间】：2020-07-18 01:39:41 【问题描述】：

所以我想在用户加载我的网站时增加一个变量，并在用户离开时减少该变量。

我得到的输出是：“Value is : undefined”

如果变量没有被递增并且未定义，这是有道理的。这让我相信 onload 和 onbeforeload 函数没有被执行。然而，使用这段代码，当用户离开网站时，他们会收到一条警告提示，这让我相信函数正在执行，而变量由于某种原因没有增加或减少。

我正在使用 Firefox 和我的树莓派使用默认浏览器测试笔记本电脑的连接。

我的预期是当我的笔记本电脑连接到网站时变量 VisOn 会增加 1，并且当我的 pi 和笔记本电脑都连接时会显示：“Value is : 2”。

代码贴在下面：

<html>
<head>

<script type="text/javascript">

    var VisOn;


     function load()
        
            VisOn = VisOn +1 ;
            return VisOn;
        

     function leave()
        
            VisOn = VisOn -1 ;
            return VisOn;
           



    window.onbeforeunload = leave;
    window.onload = load;


</script>

</head>

<style>
body background-color: lightyellow
h1 color:blue

</style>

<body>



   <form>


   <br>

   value is : 
     <script type="text/javascript">
        document.write(VisOn)
      </script>

    </form>

    <br>

</body>
</html>

【问题讨论】：

【参考方案1】：

你忘记初始化变量VisOn

var VisOn = 0;

这样做，它应该可以工作。

更新：添加了工作 jsfiddle https://jsfiddle.net/qept46bo/

【讨论】：

当我给它一个值时，输出是：“值是：0”，当我在笔记本电脑上加载网站时，输出仍然是：“值是：0”如果它应该是 1我的代码可以正常工作，或者理想情况下是 2 那是因为您没有更新 html 元素以反映 VisOn 的新值。您在 onload 函数中增加了变量的值，但这不会重新绘制 DOM 元素。您需要手动更新元素。这是一个正在运行的 jsfiddle jsfiddle.net/qept46bo 这可行，但是，当我有两个 ip 连接到网站时，它仍然只显示 1，我认为这是因为每次运行脚本时我们将 VisOn var 设置为 0，我改变了它回到“var VisOn;”而不是“var VisOn = 0”，但所做的只是输出：“值是 NaN”，关于如何让这个工作用于多个连接并计算有多少连接是活动的有什么想法吗？这里要注意的一点是，我们只是将访问计数存储在客户端。基本上这意味着它在重新加载或从另一台计算机访问后不会持续存在。如果要实现真正的访问计数器，则应将其保存在数据库中并持久化数据。你在哪里初始化了脚本中的 VisOn = 0 ？【参考方案2】：

除了上面已经提到的缺失初始化之外，没有添加任何机制来检索其他人打开页面的数量。您的 javascript 仅在客户端上运行，这意味着您需要添加一些服务器通信才能达到预期效果。

【讨论】：

以上是关于window.onload 和 window.beforeunload 在尝试更新和显示变量时不起作用的主要内容，如果未能解决你的问题，请参考以下文章

js window.onload 加载多个函数和追加函数详解

在html中使用window.onload和onload的区别

window.onload 与 document.onload

body里面的onload和window.onload，window.load的区别

$(document).ready和window.onload,细微小区别,ready是jQuery的方法,onload是window的方法