【JavaScript】window.location用法

目录

对象常用属性

使用示例

对象常用方法

运用扩展

---

对象常用属性

• hash（URL 的锚部分）
• host（当前 URL 的主机和端口）
• hostname（当前 URL 的主机名）
• href（当前页面的 URL）
• origin（URL 的协议、主机名和端口号）
• port（当前 URL 的端口号）
• pathname（当前路径）
• protocol（当前 URL 的协议）
• search（URL 的 查询字符串部分）

使用示例

以 http://www.mysite.com:8080/test?id=10086&username=xxx为例，

1、 获取当前url：window.location.href
输出：http://www.mysite.com:8080/test?id=10086&username=xxx

2、 获取协议：window.location.protocol
输出：http:

目前url的协议比较多，比如还有：

• file:
• ftp:
• http:
• https:
• mailto:

3、获取域名：window.location.hostname
输出：www.mysite.com

4、获取域名+端口：window.location.host
输出：www.mysite.com:8080

5、获取路径部分：window.location.pathname
输出：/test

6、获取端口号：window.location.port
输出：8080

如果端口是标准的（例如HTTP的80和HTTPS的443），则不会返回端口号

7、获取请求的参数：window.location.search
输出：?id=10086&username=xxx

8、获取锚部分，包括哈希符号（#）：window.location.hash
输出：#xxx

9、URL 的协议、主机名和端口号：window.location.origin
输出：http://www.mysite.com:8080

也可以采用拼接方式：

let baseUrl = location.protocol + '//' + location.hostname + (location.port ? ':' + location.port : '') + '/';

console.log(baseUrl);

10、获取域名+端口+路由
let routerIndex = window.location.href.indexOf('?');
let url = window.location.href.slice(0, routerIndex > 0 ? routerIndex : window.location.href.length);
console.log(url);

输出：http://www.mysite.com:8080/test

对象常用方法

• location.assign() 加载一个新的文档,就相当于一个链接，跳转到指定的url，例如：location.assign("https://www.baidu.com");
• location.reload() 重新加载当前文档，没有参数或者参数是 false，它就会用 HTTP 头 If-Modified-Since 来检测服务器上的文档是否已改变。如果文档已改变，reload() 会再次下载该文档。如果文档未改变，则该方法将从缓存中装载文档。这与用户单击浏览器的刷新按钮的效果是完全一样的。如果该方法的参数为 true，那么会绕过缓存，从服务器上重新下载该文档。这与用户在单击浏览器的刷新按钮时按住 Shift 健的效果是完全一样。
• location.replace() 用一个新文档取代当前文档,不会在 History 对象中生成一个新的记录。当使用该方法时，新的 URL 将覆盖 History 对象中的当前记录。   

运用扩展

1、获取相对路径

做法：

• 获取 Url，
• 把 Url 通过 // 截成两部分，
• 从后一部分中截取相对路径。如果截取到的相对路径中有参数，则把参数去掉。

function getUrlRelativePath(){
　　var url = document.location.toString();
　　var arrUrl = url.split("//"); 
　　var start = arrUrl[1].indexOf("/");
　　var relUrl = arrUrl[1].substring(start);//stop省略，截取从start开始到结尾的所有字符 
　　if(relUrl.indexOf("?") != -1){
　　　　relUrl = relUrl.split("?")[0];
　　}
　　return relUrl;
}

 2、获取指定参数

   2.1 通过正则表达式  

function getQueryString(name) {
    var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i');
    var result = window.location.search.substr(1).match(reg);
 
    if (result != null) {
       return unescape(result[2]);
    }
    return null;
}
getQueryString('username');

 2.2 split拆分法

function getRequest() {
        var url = location.search; //获取url中"?"符后的字串
        var theRequest = new Object();
 
        if (url.indexOf("?") != -1) {
                var str = url.substr(1);
                strs = str.split("&");
             for(var i = 0; i < strs.length; i ++) {
                     theRequest[strs[i].split("=")[0]] = unescape(strs[i].split("=")[1]);
              }
        }
    return theRequest;
}
console.log(getRequest()['username']);