一个html页面加载不同,通过sessionStorage来根据屏幕宽度变化来加载不同的html页面...

因为项目需要，分别写了移动端和PC端的两个html页面，现在需要根据不同的屏幕宽度来加载对应的页面。

先说一下本人的思路--

刚开始我直接在加载页面的时候判断屏幕宽度，然后加载相应的页面，大家是不是也想到会出现什么效果了？

没错，这个时候就出现了浏览器一直在加载切换页面的死循环！因为每次刷新页面都执行同一段js代码。。。

所以就要想办法存储刷新前的屏幕大小状态，在刷新页面的时候拿刷新前状态与刷新后状态对比，然后再决定加载哪个页面。

那么问题就来了，我们通过什么来存储这个状态呢？

这个时候就想起了h5的新特性(本地存储):

1. localStorage 长期存储数据，浏览器关闭后数据不丢失；

2. sessionStorage 的数据在浏览器关闭后自动删除。

而这次主要是通过临时存储(sessionStorage)来判断根据屏幕宽度变化来加载对应的页面的，直接看js代码：

// 通过临时存储(sessionStorage)来判断根据屏幕宽度变化来加载 移动端页面 / PC端页面

var indexUrl = "http://192.168.10.173:8020/art-preSale/index.html?__hbt=1515730525577"; //PC端

var indexMobileUrl = "http://192.168.10.173:8020/art-preSale/index-m.html?__hbt=1516171504432"; //移动端

var newState = 0; //记录当前是大屏幕(1)还是小屏幕 (0)

resizeUnit(); //初始化加载页面

//浏览器窗口变化时也要初始化加载页面

window.onresize = function(){

resizeUnit();

}

/**

* 刷新页面时加载对应的页面

* @param {Object} width 加载不同页面的分界点(屏幕宽度),默认不传参就是768

*/

function resizeUnit(width){

var width = width || 768;

var windowWidth = window.innerWidth; //获取可视窗口大小

//var windowWidth = window.screen.width;

// 判断窗口大小 以传入的宽度为分界点

if(windowWidth

newState = 0;

}else {

newState = 1;

}

//判断sessionStorage是否存在 "oldState"

if(sessionStorage.getItem('oldState')){

//刷新后sessionStorage已保存有刷新前的状态，则获取该值，与当前状态值进行对比

var oldState = sessionStorage.getItem('oldState');

if(newState!=oldState){

sessionStorage.setItem('oldState', newState); // 重置为当前状态值

getHtml(newState); // 跳转到相应的html页面

}

}else{

//保存刷新前的状态数据到sessionStorage

sessionStorage.setItem('oldState', newState); //初始化的时候设置

getHtml(newState);

}

}

/**

* 根据状态跳转相应的html页面

* @param {Object} state 当前屏幕宽度的状态 (1为大屏幕，0为小屏幕)

*/

function getHtml(state) {

if(state==1){

window.location.replace(indexUrl);

}else if(state==0){

window.location.replace(indexMobileUrl);

}

};

以上代码经测试是可行的，有问题欢迎提出哦！

有人跟我推荐使用浏览器本身的cookie来实现加载不同页面的功能， 因为cookie是所有浏览器都支持的，有时间可以尝试一下 ：)