Question

美好的一天每个人，我只有一次工作 onload 时遇到麻烦。因为当我刷新页面或者我要去另一个页面时它总是加载。这是我目前的代码：

JS

<!--Auto load the on overlay function-->
 <script>
    window.onload = function openNav() {
    document.getElementById("myNav").style.width = "100%";
    splashScreen();
}

function closeNav() {
    document.getElementById("myNav").style.width = "0%";
}
</script>

这是我的 splashscreen.js

的js功能

//use onload when in your html the context is not inside
//the <header>
//create a splashScreen function
function splashScreen(){
//get the element on the html side with the id of "skip"
var skipButton = document.getElementById("skip");
//counter for the countdown
var counter = 5;
//create an element <p>
var newElement = document.createElement("p");
newElement.innerHTML = "Skip this 5 seconds";
var id;

skipButton.parentNode.replaceChild(newElement, skipButton);

id = setInterval(function(){
counter--;
    if(counter < 0){
        //replace the newElement on else condition statement
        newElement.parentNode.replaceChild(skipButton, newElement);
        clearInterval(id);
    } else {
        newElement.innerHTML = "You can skip this in " + counter.toString() + " seconds.";
    }
}, 1000);
}

这就是我在 html

上的称呼方式

  <html>
  <body>
<!--SplashScreen JS-->
<script src="<?php echo base_url('assets/public/js/splashscreen.js');?>">
</script>

Answer 1

当您刷新页面或转到另一个页面，然后返回原始页面时，页面正在重新加载，因此正在调用onLoad处理程序。

如果您希望某些功能只发生一次，那么您可以尝试的一件事是设置一个可以在页面加载时检查的cookie。如果设置了cookie，您知道已经加载了一次，并且不再运行该代码。如果没有，则运行代码，然后设置cookie。

Cookie的有用链接： https://www.w3schools.com/js/js_cookies.asp

Answer 2

一种方法是设置.name的{{1}}属性，该属性在window之后保持设置。

window

Answer 3

为了能够知道已经为给定用户显示了启动画面，您需要存储在页面加载事件之间持续存在的效果。由于页面将在单击刷新按钮时重新加载，或者在之前返回页面后重新加载，因此该存储的项目不能在页面本身中，因为每次页面加载时它都会重新初始化。 / p>

Cookie（在另一个答案中提到）是一个选项，但 localStorage ，我认为更简单。它的工作原理如下：

// Once the window is loaded...
window.addEventListener("load", function(){

   // Check localStorage to see if the splash screen 
   // has NOT already been displayed
   if(!localStorage.getItem("splash")){

     // Splash has not been displayed, so show it:
     splashScreen();

     // Store a value in localStorage to denote that the splash screen
     // has now been displayed
     localStorage.setItem("splash", "true");
   }
});

Onload只需要工作一次

3 个答案: