window.location.replace сохранить перезагрузку страницы, как ее остановить?

Question

Я создаю скрипт, который меняет CSS в некоторых точках прерывания и в 2 точках перенаправляет его на другую страницу.

Изменение работы 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'); 
     }; 
    }; 

Answer 1

Вы можете во избежание ошибки refreshing, проверив target page name с помощью current page name.

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'); 
     }; 
    }; 

Answer 2

Не использовать 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... */ 

Браузер будет автоматически загрузки/изменить таблицу стилей, при загрузке страницы и при изменении размера окна.