Simple Load an HTML page from javascript based on window width

Question

Hopefully this is a simple question. I created 3 html files based on different sizes. Basically what I want to do is load a specific page depending the size (width) of the clients computer/smart phone.

For example put in main index.html something like

If (page.width < 321)
Load index320.html
Else if (page.width > 320) and (page.width < 481)
Load index480.html
Else load indexother.html

Answer 1

My best guess is to do this with a XMLHttpRequest.

First decide which page you should load. After that, load the page. For example:

var width = window.innerWidth;
var page;

if (width < 321) {
    page = 'index320.html';
} else if (width >= 321 && width < 481) {
    page = 'index480.html';
} else {
    page = 'indexother.html';
}

// http://stackoverflow.com/questions/3038901/how-to-get-the-response-of-xmlhttprequest
var xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
    if (xhr.readyState == XMLHttpRequest.DONE) {
        // do some stuff with the content
        alert(xhr.responseText);
    }
}

xhr.open('GET', page, true);
xhr.send(null);