javascript - Reload page when a certain width is passed - Stack Overflow

admin管理员组

文章数量:1344974

I want the page to reload only if the browser window goes above or below 768px. This was my attempt which failed.

if ($(window.width() > "769") {
    $(window).resize(function () {
        if ($(window).width() < "769") {
            location.reload();
        }
    });

}
elseif($(window.width() < "769") {

    $(window).resize(function () {
        if ($(window).width() > "769") {
            location.reload();
        }
    });

}

Im sures theres a really simple way of doing this.

I want the page to reload only if the browser window goes above or below 768px. This was my attempt which failed.

if ($(window.width() > "769") {
    $(window).resize(function () {
        if ($(window).width() < "769") {
            location.reload();
        }
    });

}
elseif($(window.width() < "769") {

    $(window).resize(function () {
        if ($(window).width() > "769") {
            location.reload();
        }
    });

}

Im sures theres a really simple way of doing this.

• javascript
• jquery
• browser
• window
• width

Share Follow edited May 14, 2012 at 1:10 Felix Kling 818k181181 gold badges1.1k1.1k silver badges1.2k1.2k bronze badges asked May 14, 2012 at 0:38 chrischris 2,95144 gold badges4343 silver badges4848 bronze badges 3

• 3 Why?? Could you explain why you are asking for such functionality? Maybe there is an option you are overlooking for this purpose. – PenguinCoder Commented May 14, 2012 at 0:40
• Agreed above. The resize function gets triggered instantaneously as the window size changes. So when a user holds the window corner and starts resizing it the page will be reloaded over and over again until he leaves the mouse button (or stops resizing), which will probably result in annoyance. – inhan Commented May 14, 2012 at 0:43
• Im making a responsive site and need to do some link rewriting for the mobile version under a certain width. And have the links revert back to normal over a certain width. Its not essential but i wanted to use a refresh incase people try playing with just resizing browser width. Im link rewriting in a strange way which would require a refresh of page. – chris Commented May 14, 2012 at 0:56

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 7

demo jsFiddle

The proof that the page is reloaded is (the wait icon in the tab :D ) the Math random that generates a random number (in the demo.)

var ww = $(window).width();
var limit = 769;

function refresh() {
   ww = $(window).width();
   var w =  ww<limit ? (location.reload(true)) :  ( ww>limit ? (location.reload(true)) : ww=limit );
}

var tOut;
$(window).resize(function() {
    var resW = $(window).width();
    clearTimeout(tOut);
    if ( (ww>limit && resW<limit) || (ww<limit && resW>limit) ) {        
        tOut = setTimeout(refresh, 100);
    }
});

The timeout function will help on window resize to wait 100ms before calling the refresh function.
You can increase the timeout value to improve usability.

There are probably other and much better ways of doing what you really need, but:

if ($(window.width() > "769"){

Should be:

if ($(window).width() > 769){

Full code:

var width = $(window).width();
$(window).resize(function() {
    if (width > 769 && $(window).width() < 769) {
        location.reload();
    }
    else if (width < 769 && $(window).width() > 769) {
        location.reload();
    }
});​

Live DEMO

It could be made with one if statement, but I preferred splitting it into two so it'll be easier to follow.

本文标签： javascriptReload page when a certain width is passedStack Overflow