Question

我使用调整大小来重新加载页面，但是当页面尺寸小于768px或大于768px时，我想只需重新加载一次。就是我的代码了

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

Answer 1

我不能完全确定这是否是您要查找的内容，但是当resize大于innerWidth时，以下代码每次仅在768px上触发一次，如果它小于768px。

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

如果您仍然想重新加载页面，则需要将这些变量保存在数据库中，但这还不够，因为那样您就需要跟踪每个用户的会话（即使要考虑许多情况）绝对是一个杀手kill。

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

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

如果您遇到的问题是根据屏幕尺寸设置页面样式，请改用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>

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

1 个答案: