仅在第一次执行函数 onload

Question

我在 header 中有一个具有以下结构的菜单

$(document).ready(function(){
 $('.dropdown').on('show.bs.dropdown', function(e){
  $(this).find('.dropdown-menu').first().stop(true, true).slideDown();
 });
    $('.dropdown').on('hide.bs.dropdown', function(e){
     $(this).find('.dropdown-menu').first().stop(true, true).slideUp();
   });

 $('#entrar').click(function(e){
     $('#head').slideToggle();
     $(".boton").css("display","none");
     $("#secciones").slideToggle();
        $("#foot").slideToggle();
 });
    $('#entrar').click(function() {
     $('html, body').animate({
        scrollTop: $(".principal").offset().top + 70
     }, 700);
    });
});

$(document).ready(init);
 function init(){
    var sec = document.getElementById("secciones");
    var he = document.getElementById("head");
    var fo = document.getElementById("foot");
    he.style.display = "none";
    sec.style.display = "none";
    fo.style.display = "none";
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
  <div class="main_wrapper">
    <header id="head">
  <div class="container">
   <section class="row">
    <article class="col-xs-3">
     <h1 id="main_logo">
      <a href="index.php"><img src="images/logo.png" alt=""></a>
     </h1>
    </article>
    <article class="col-xs-9">
     <ul class="nav nav-pills" id="menu">
      <li class="active"><a href="index.php">INICIO</a></li>
      <li class="dropdown">
       <a class="dropdown-toggle" data-toggle="dropdown" href="#">MODELOS<span class="caret"></span></a>
       <ul class="dropdown-menu">
        <li><a class="sec_index" href="index.php#galeria">Modelos en Panamá</a></li>
       </ul>
      </li>
      <li class="dropdown">
       <a class="dropdown-toggle" data-toggle="dropdown" href="#">BLOG<span class="caret"></span></a>
       <ul class="dropdown-menu">
        <li><a class="sec_index" href="index.php#blog">Últimas Entradas</a></li>
        <li><a href="blog.php">Blog Chicas507</a></li>
        <li><a href="glosario.php">Glosario de Términos</a></li>
       </ul>
      </li>
      <li class="dropdown">
       <a class="dropdown-toggle" data-toggle="dropdown" href="#">ANÚNCIATE<span class="caret"></span></a>
       <ul class="dropdown-menu">
        <li><a class="sec_index" href="index.php#paquetes">Paquetes</a></li>
        <li><a href="registro.php">Regístrate</a></li>
        <li><a href="recuperar.php">Recuperar Cuenta</a></li>
       </ul>
      </li>
      <li><a class="sec_index" href="index.php#contacto">CONTACTO</a></li>
      <li><a href="about.php">INFORMACIÓN</a></li>
      <li><a href="login.php">INGRESA</a></li>
     </ul>
    </article>
   </section>
  </div>
 </header>
    <section class="principal" id="principal">
   <div class="boton" id="entrar"><a href="#">ENTRAR</a></div>
   <div class="boton" id="salir"><a href="#">SALIR</a></div>
  </section>
 <section class="secciones" id="secciones">
      some sections
    </section>
    <footer id="foot">
    </footer>
  </div>
</body>

我在网页中有多个部分，菜单中的一些链接将我带到索引中的部分，例如 index#models。一切正常，但事情就是这样。我有一些隐藏部分的 JavaScript 代码和称为 init 的 header。我在 body 中使用 onload 来调用函数，并使用按钮 "entrar" 来显示。这行得通，但是每次我重新加载页面时都会调用该函数，我只想运行第一次和刷新页面时。无需单击按钮即可显示所有内容。另外，当我切换到网站的另一部分时，我不想加载。例如，如果我进入博客，然后点击回家，功能加载，我必须再次点击 "entrar"。我不要那个。

我一直在尝试解决这个问题，但找不到解决方案。我感谢您的帮助。请！

Answer 1

您可以使用 HTML5 网络存储。

    if (typeof(Storage) !== "undefined")
    {
        console.log("Your browser doesn't support webstorage");
    } 
    else if (sessionStorage.getItem("ui_flag") === null) // Check if the key is set. It's a self defined key.
    {
        sessionStorage.setItem("ui_flag", 1); // If not set, set it
        $(document).ready(init); // Now call your init function here. This code will execute only once for a window.
    }
    else
    {
        //No Action. It's not the first time.
    }

Answer 2

如果您希望它在浏览器关闭后仍然存在，您可以设置一个 localStorage 变量：

$(function() {
    var visited = localStorage['visited'];
    if (!visited) {
       init();
       localStorage['visited'] = true;
    }

    function init() {
        var sec = document.getElementById("secciones");
        var he = document.getElementById("head");
        var fo = document.getElementById("foot");
        he.style.display = "none";
        sec.style.display = "none";
        fo.style.display = "none";
    }
});

或者 sessionStorage 如果您希望它在浏览器关闭后发生：

$(function() {
    var visited = sessionStorage['visited'];
    if (!visited) {
       init();
       sessionStorage['visited'] = true;
    }

    function init() {
        var sec = document.getElementById("secciones");
        var he = document.getElementById("head");
        var fo = document.getElementById("foot");
        he.style.display = "none";
        sec.style.display = "none";
        fo.style.display = "none";
    }
});

Answer 3

我会选择 cookie，它用于存储一个小值，您只需在其中检查它是否存在。

与 CSS 相结合，您将获得一个小巧高效的解决方案。

使用下面的 CSS/JS，当页面第一次加载时创建 cookie，第二次将 loadedonce 添加到 html 元素，然后 CSS 开始，显示隐藏的元素

只需将 cookie 的创建移动到单击按钮，它只会在单击该按钮后显示它们。

由于 cookie 在 Stack 片段中不起作用，我用你的代码做了一个 fiddle demo

CSS

#secciones, #head, #foot, .loadedonce .boton {
  display: none;
}
.loadedonce #secciones, .loadedonce #head, .loadedonce #foot {
  display: block;
}

JS 是否加载（在 js 文件的头部或开头）

(function(d) {
  if (document.cookie.indexOf("loadedonce=yes") < 0) {
    document.cookie = "loadedonce=yes; expires=Thu, 31 Dec 2099 12:00:00 UTC; path=/";      
  } else {
    d.classList.add('loadedonce');    
  }
})(document.documentElement);

JS 如果点击

(function(d) {
  if (document.cookie.indexOf("loadedonce=yes") >= 0) {
    d.classList.add('loadedonce');    
  }
})(document.documentElement);


$('#entrar').click(function() {
    document.cookie = "loadedonce=yes; expires=Thu, 31 Dec 2099 12:00:00 UTC; path=/";      
});

仅在第一次执行函数 onload

Execute function onload only first time

html

javascript

css

jquery

onload