iPad is crashing after refresh in JavaScript

Question

I have got a website that is reloading in JavaScript when $(window).width() > 1000px and after changing it to $(window).width() <= 1000px

I just want to reload my page after switching between mobile and desktop views.

After changing orientation on iPad 4 (iOS 10.3) for a few times - browser says that Problem occured and the page was reloaded. And iPad is stucking in infinite loop of reloading not by my script but by it's Safari.

$(window).resize(function() {        
    if($(window).width()>mobileBreak) {
        if(device==='mobile') {  
            setTimeout(function() {
                refresh();
            },200);
        }
    }
    else {
        if(device==='desktop')  
            setTimeout(function() {
                refresh();
            }, 200);      
        }          
    }
});

function refresh() {
    window.location.reload();
}

at the beginning of course i'm checking $(window).width() and setting up variable device .

It is working great on PC's, but not well on tablets with IOS.

Don't ask me why i have to reload page each time on view change. I just have to.

Answer 1

I found answer to my question! When i'm refreshing page on orientation change - Safari thinks that it's some kind of loop and showing error. I had added hidden form and each time when I'm changing orientation i'm setting random value of input inside this form and sending POST to current location. It works awesome, no bugs, no problems! Mayby this will help somebody with this problem in future.

Answer 2

Using resize may be the real cause of the issue, it may be getting called a few times when the size is changed. You can use jquerymobile throttled resize event for that purpose instead of window.resize() . https://api.jquerymobile.com/throttledresize/

$(window).on('throttledresize', function() {        
    if($(window).width()>mobileBreak) {
        if(device==='mobile') {  
            setTimeout(function() {
                refresh();
            },200);
        }
    } else {
        if(device==='desktop')  
            setTimeout(function() {
                refresh();
            }, 200);      
        }          
    }
});

function refresh() {
    window.location.reload();
}