window.location.replace不斷重新加載頁面，如何阻止？

我正在創建一個腳本，它在一些斷點處更改CSS，並在2個確切點處重定向到另一個頁面。window.location.replace不斷重新加載頁面，如何阻止？

更改CSS的工作流暢，但重定向點，腳本不斷重新加載頁面，如何停止它，並將其設置爲只重載一次，如果需要重新加載「分辨率再次改變」。

下面是代碼：

/*Change CSS in response to common resolutions.*/ 
$(document).ready(function() { 
    checkWidth(); 
    $(window).resize(checkWidth); 
}); 

function checkWidth(){ 
    var windowWidth = $(window).width(), 
     cssLocation = $('link[href$="main.css"]'); 

    if (windowWidth <= 240){ 
     cssLocation.attr('href','stylesheets/240-main.css'); 
     } 
    else if (windowWidth <= 480){ 
     /*Redirecting point 1*/ 
     window.location.replace("smartPhone-index.html"); 
     cssLocation.attr('href','stylesheets/480-main.css'); 
     }  
    else if (windowWidth <= 768){ 
     /*Redirecting point 2*/ 
     window.location.replace("index.html"); 
     cssLocation.attr('href','stylesheets/768-main.css'); 
     }  
    else if (windowWidth <= 1024){ 
     cssLocation.attr('href','stylesheets/1024-main.css'); 
     }  
    else if (windowWidth >= 1280){ 
     cssLocation.attr('href','stylesheets/1280-main.css'); 
     }; 
    };

來源

2013-11-24 Mohammed Hanafy

這是試圖達到什麼目的？更改CSS文件的href不會導致CSS重新加載，並且我不認爲resize事件也會執行。 – vogomatix

你需要通過外觀來限制你的'$（window）.resize（）'事件 - 有幾個[jQuery插件]（https://www.google.com/search?q=jquery+油門+去抖動），可以幫助你。 – Emissary

更好的主意是編寫你的CSS，以便它調整所有系統的大小。看看[Bootstrap]（http://getbootstrap.com），例如 – vogomatix

通過檢查target page name和current page name，您可以多次避免refreshing頁面。

var xFullPath = window.location.pathname; 
var xPageName = xFullPath.substring(xFullPath.lastIndexOf("/") + 1); 

function checkWidth(){ 
    var windowWidth = $(window).width(), 
     cssLocation = $('link[href$="main.css"]'); 

    if (windowWidth <= 240){ 
     cssLocation.attr('href','stylesheets/240-main.css'); 
     } 
    else if (windowWidth <= 480){ 
     /*Redirecting point 1*/ 
     if (xPageName !== "smartPhone-index.html") 
     { 
     window.location.replace("smartPhone-index.html"); 
     cssLocation.attr('href','stylesheets/480-main.css'); 
     } 

     }  
    else if (windowWidth <= 768){ 
     /*Redirecting point 2*/ 
     if (xPageName !== "index.html") 
     { 
      window.location.replace("index.html"); 
      cssLocation.attr('href','stylesheets/768-main.css'); 
     } 
     }  
    else if (windowWidth <= 1024){ 
     cssLocation.attr('href','stylesheets/1024-main.css'); 
     }  
    else if (windowWidth >= 1280){ 
     cssLocation.attr('href','stylesheets/1280-main.css'); 
     }; 
    };

來源

2013-11-24 10:08:26

然而，我必須將cssLocation.attr從第二版中取出才能使其完美運行。你真棒！謝謝你分配！ –

@MohammedHanafy總是很樂意幫忙。 –

不要使用JavaScript這一點，使用CSS media queries。

直接在鏈接標籤：

<link rel="stylesheet" media="screen and (max-width: 240px)" href="stylesheets/240-main.css" /> 
<link rel="stylesheet" media="screen and (min-width: 241px) and (max-width: 480px)" href="stylesheets/480-main.css" /> 
<link rel="stylesheet" media="screen and (min-width: 481px) and (max-width: 768px)" href="stylesheets/768-main.css" /> 
<!-- etc... -->

在CSS

或者直接：

@import url(stylesheets/240-main.css) (max-width:240px); 
@import url(stylesheets/480-main.css) (min-width:241px) and (max-width:480px); 
@import url(stylesheets/768-main.css) (min-width:481px) and (max-width:768px); 
/* etc... */

瀏覽器會自動加載/改變樣式，在頁面加載和窗口大小調整期間。

來源

2013-11-24 10:02:51 zamnuts

window.location.replace不斷重新加載頁面，如何阻止？

回答

相關問題