Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
340 views
in Technique[技术] by (71.8m points)

Simple Load an HTML page from javascript based on window width

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
See Question&Answers more detail:os

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

2.1m questions

2.1m answers

60 comments

57.0k users

...