如何使用 Javascript 只重新加载一次网页？

Question

我使用调整大小来重新加载我的页面，但我希望只重新加载一次，当页面尺寸小到大于 768 像素或大到超过 768 像素时。 我的代码现在

$(window).resize(function(){
	// if(document.body.clientWidth <= ipadWidth && x = 1){
		location.reload()
	// }
});

Answer 1

我不完全确定这是否是您要查找的内容，但是当innerWidth 大于768px 并且小于@987654325 时，下面的代码每次只会在resize 上触发一次@。

注意：在这种情况下不能选择重新加载页面，因为刷新页面后所有值都会重置。

如果您仍然想重新加载页面，那么您需要将这些变量保存在您的数据库中，但这还不够，因为您需要跟踪每个用户的会话（即使有很多场景需要考虑），绝对是矫枉过正。

我的建议是最终避免强制刷新。

如果您提供有关为什么要强制重新加载页面的更多信息，那么我可能会为您的问题提出更好的解决方案。

如果您的问题是根据屏幕尺寸设置页面样式，请改用media queries。

例如：

@media screen and (max-width: 768px) {
  your CSS here
}

在上述情况下，您的CSS 规则将一直处于活动状态，直到浏览器大小调整到768px 以上。之后，您的代码中的默认 CSS 规则将处于活动状态。

let isSmall = false
let isBig = false
$(window).resize(function(){
   if (window.innerWidth >= 768 && !isBig) {
      isBig = true
      //location.reload()
      console.log('big once')
   }
   if (window.innerWidth < 768 && !isSmall) {
       isSmall = true
       //location.reload()
       console.log('small once')
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

编辑 我更新了答案，以便为您提供一些示例，说明如何使用 JS 有条件地显示和隐藏元素。

我举了两个例子。

第一个调整窗口大小的例子——这在性能方面有点贵。

第二个是页面加载时 - 检查只发生一次，在第一次加载时。

$(window).resize(function(){
   if (window.innerWidth < 768) {
     $(".choiceSubject_btn").show();    
   }else {
      $(".choiceSubject_btn").hide();   
   }
})
 
 
$( document ).ready(function() {
    if (window.innerWidth < 768) {
    $(".choiceSubject_btn").show();     
   }else {
      $(".choiceSubject_btn").hide();   
   }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="choiceSubject_btn">my button<h4></h4><i class="fas fa-caret-down"></i></button>