window.location.origin属性在浏览器上兼容性好像有一些问题了在这里我们整理了一篇关于window.location.origin属性的兼容问题分析教程，具体如下。
项目开发时一直使用Chrome浏览器作为开发支持，因为它提供的debug功能非常很实用。能满足Web前端部分开发需求。
由于项目的分页界面都是采用ajax实现的页面无刷新，这个设计会有一个问题就是当翻页后，比如说第2页，当点击浏览器刷新按钮，当前页就会跳转到第一页去。
那么这个时候，需要解决这个页码问题需要用到window.location.hash (也就是浏览器地址栏的URL#main) 这个数据。
例如：
第一页
/article/list.php#page_1
第二页
/article/list.php#page_2
这么设计后，页面刷新要保持页码，那么就需要使用javascript获取window.locaiton.hash属性。来判断页码后渲染数据。
这里贴上部分实现代码：
| 代码如下 |
|
|
$(function(JQuery){
JQuery.api = {};
// 分页查询
JQuery.api.findPage = function(url, params, func){
var page = window.location.hash;
if(page){// 有页码
window.location.hash = "#p" + params.pageNo;
}else{// 页码默认第一页
window.location.href = getUrlPath() + "#p"+params.pageNo;
}
$.ajax({
url: url,
dataType:"json",
data: params,
success: func,
error:function(e){
console.log(e);
}
});
};
// 获取Hash页码
JQuery.api.getHashPage = function(){
var hash = window.location.hash;
if(hash){
var pageNo = parseInt(hash.substring(2, hash.length));
if(!isNaN(pageNo)){
return pageNo;
};
}
return 1;
};
// 获取URL地址
function getUrlPath(){
// 这部分代码就是处理标题兼容问题的。
// 由于在Chrome window.location.origin 属性是支持的，但是在IE11不支持，会导致无法正常翻页。
var loc = window.location;
var portStr = "";
if(loc.port != 80){ portStr = ":"+loc.port; }
return loc.protocol + "//" +loc.hostname + portStr + loc.pathname;
}
});
|
结束语
此问题在项目开发中看开发者使用什么方式进行开发，如果采用服务器方式分页也就不存在这个问题了
