Как перезагрузить веб-страницу только один раз, используя Javascript?

Question

Я использую изменение размера, чтобы перезагрузить страницу, но я хочу, чтобы просто перезагружалось один раз , когда размер страницы меньше 768 пикселей или больше 768 пикселей. что мой код сейчас

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

Answer 1

Я не совсем уверен, что это то, что вы ищете, но приведенный ниже код будет запускаться каждый раз только один раз на resize, когда innerWidth больше 768px, и один раз, если он меньше 768px.

Примечание: перезагрузка страницы не является вариантом в этом случае, так как все значения будут сброшены после обновления страницы.

Если вы все еще хотите перезагрузить страницы, вам нужно будет сохранить эти переменные в своей базе данных, но этого недостаточно, поскольку тогда вам нужно будет отслеживать сеансы для каждого пользователя (даже с учетом множества сценариев ios, которые следует учитывать), что определенно является излишним.

Мое предложение - в конечном итоге избежать принудительного обновления.

Если вы предоставите дополнительную информацию о том, почему вы хотите принудительно перезагрузить страницу, то, возможно, я мог бы предложить лучшее решение вашей проблемы.

Если ваша проблема связана с стилизацией страницы в соответствии с размером экрана , используйте вместо этого медиа-запросы .

Например mple:

@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>

EDIT Я обновил ответ, чтобы дать вам несколько примеров того, как вы можете использовать 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>