在調整過去點時刷新瀏覽器一次--JQuery

Question

我絕對堅持這一點，所以我希望你們可以幫忙！

基本上我試圖刷新瀏覽器，如果瀏覽器從960px或更高調整到959px或更少。

我想這一次發生，但如果瀏覽器被調整回升到960像素或以上，然後再次被調整回落，再次刷新......

不能確定是否是有整個負載的感覺，但這是我迄今爲止！

function checkWidth() { 
     var windowsize = $window.width(); 
     var i = 0; 

     if (windowsize > 959 && i==0){ 
      var i = 1; 
     } 
     else if (windowsize <= 959 && i==1) { 
      location.reload(); 
      var i = 0;  

     } 
    } 
    // Execute on load 
    checkWidth(); 
    // Bind event listener 
    $(window).resize(checkWidth); 

任何幫助將超級棒！ Cheeeers！

Answer 1

嘗試像這樣

var i = 0; 

$(function() { 
    $(window).on("resize", function() { 
     var windowsize = $(this).width(); 
     if (windowsize > 959 && i === 0) { 
      i = 1; 
     } else if (windowsize <= 959 && i == 1) { 
      location.reload(); 
      i = 0; 
     } 
    }); 
}); 

Answer 2

您需要在函數第一行的窗口周圍（）。

var i = 0; 
function checkWidth() { 
    var windowsize = $(window).width(); 

    if (windowsize > 959 && i==0){ 
     i = 1; 
    } 
    else if (windowsize <= 959 && i==1) { 
     location.reload(); 
     i = 0;  
    } 
} 
// Execute on load 
checkWidth(); 
// Bind event listener 
$(window).resize(checkWidth); 

此外，如果您不介意我的問題，您的目標是什麼？我假設你正在試圖做一些響應式設計的，如果是的話，你應該考慮使用CSS

@media (max-width:959px) { styles for when its under 959px wide go here } 

這將變成處理響應純CSS方法和可能不需要你做任何事情javascript爲它。

Answer 3

試試這個..

function checkWidth() { 
    var windowsize = $(window).width(); 
    var reload = false; 

    if (windowsize > 959){ 
     reload = true; 
    } 
    else if (windowsize <= 959) { 
     reload = true; 
    } 
    if(reload){ 
     location.reload(); 
    } 
} 
// Bind event listener 
$(window).resize(checkWidth); 

Answer 4

我從這次最終的解決方案，當我從「桌面」模式（575像素寬度或移動它工作正常更多）移動到'移動'，但從'移動'模式（574像素寬度或更小）移動時，它不會完全重新加載/刷新頁面。似乎javascript的菜單和一個臨時視口寬度線沒有完全重新加載，雖然所有的頁面內容都正確重新加載。

有什麼方法可以確保在兩個方向上完全重新加載？我可能在錯誤的地方有 javascript？手動刷新將其所屬的所有內容放回原處並恢復所有功能。

這是所有頁面的頁眉通過一個包含文件：

<script type="text/javascript"> 
    var i = 0; 
    function checkWidth() { 
     var windowsize = $(window).width(); 
     if (windowsize > 574 && i==0){ 
      i = 1; 
     } 
     else if (windowsize <= 574 && i==1) { 
      location.reload(); 
       i = 0;  
     } 
    } 
    // Execute on load 
    checkWidth(); 
    // Bind event listener 
    $(window).resize(checkWidth); 
</script> 

而對於菜單的JavaScript只是在版權上面包含文件我用：

<script src="/js/jquery.dlmenu.js"></script> 
    <script type="text/javascript"> 
     $(window).resize(function(){  
      $(function() { 
       $('#dl-menu').dlmenu({ 
        animationClasses : { classin : 'dl-animate-in-2', classout : 'dl-animate-out-2' } 
       }); 
      }); 
     }); 
    </script> 

和視口尺寸javascript是包含在版權：

<div id="dimensions"> 
    <script type="text/javascript"> 
     <!-- 
      var viewportwidth; 
      var viewportheight; 
      // the more standards compliant browsers (mozilla/netscape/opera/IE7) use window.innerWidth and window.innerHeight 

      if (typeof window.innerWidth != 'undefined') 
      { 
       viewportwidth = window.innerWidth, 
       viewportheight = window.innerHeight 
      } 
      // IE6 in standards compliant mode (i.e. with a valid doctype as the first line in the document) 
      else if (typeof document.documentElement != 'undefined' 
       && typeof document.documentElement.clientWidth != 
       'undefined' && document.documentElement.clientWidth != 0) 
      { 
       viewportwidth = document.documentElement.clientWidth, 
       viewportheight = document.documentElement.clientHeight 
      } 
      // older versions of IE 
      else 
      { 
       viewportwidth = document.getElementsByTagName('body')[0].clientWidth, 
       viewportheight = document.getElementsByTagName('body')[0].clientHeight 
      } 
      document.write('<p>Your viewport width is '+viewportwidth+'x'+viewportheight+'</p>'); 
      <!-- document.write('<p>Your screen width is '+window.screen.width+'</p>); --> 
     //--> 
    </script> 
</div>