window.location : 所有字母必须小写!

控制台location示例图 | left

location常用属性

示例地址URL:http://127.0.0.1:8848/menu-test/index.html?id=123&name=admin#account
|标签|标签描述|示例|
|—-|——–|—-|
|href|当前页面完整的地址|示例URL|
|protocol|主机 web 协议(http:// 或 https://)|http:|
|host|主机名(包含端口号,80或443端口默认不显示)|127.0.0.1:8848|
|hostname|主机的域名或IP(不包含端口号)|127.0.0.1|
|port|主机的端口号|8848|
|search|当前URL的查询部分,?及其后面的字符串部分(如果有#,在#前面结束)|?id=123&name=admin|
|hash|#及其后面的字符串,锚部分|#account|
|pathname|当前页面的路径和文件名|/menu-test/index.html|
|origin|当前页面完整的域名url地址(兼容性问题,不建议使用)|http://127.0.0.1:8848|

location其他的操作方法

assign()导航到一个新页面

只要赋给 location 对象一个新值,文档就会使用新的 URL 加载,就好像使用修改后的 URL 调用了window.location.assign() 一样。需要注意的是,安全设置,如CORS(跨域资源共享),可能会限制实际加载新页面。

1
2
window.location.assign("http://www.mozilla.org"); // or
window.location = "http://www.mozilla.org";

reload()强制刷新,重新加载

1
window.location.reload(true);

replace()替换URL中字符串并加载新URL

1
2
3
4
function reloadPageWithHash() {
var initialPage = window.location.pathname;
window.location.replace('http://example.com/#' + initialPage);
}

location一些问题

host及hostname的区别

host会包含hostname及端口地址两部分

location.origin兼容

1
2
3
if (!window.location.origin) {
window.location.origin = window.location.protocol + "//" + window.location.hostname + (window.location.port ? ':' + window.location.port: '');
}

##参考部分资源

MDN: https://developer.mozilla.org/zh-CN/docs/Web/API/Window/location