location对象
location对象比我们想象的是要强大的,我们可以直接通过 location.href、 location.hash、 location.search等等就可以直接改变Location , 而不是返回什么,而是直接改变,所以使用location.hash等还是非常方便的。
location对象提供了与当前窗口中加载的文档的有关信息,还提供了一些导航功能,location对象既是window对象的属性,也是document对象的属性。 下面是location对象具有的所有属性:
- hash 返回URL中的hash(#号后的零或者多个字符)。
- host 返回服务器名称和端口号(如果有的话)
- hostname 返回不带端口号的服务器名称
- href 返回当前加载页面的完整的url。
- toString 返回和href属性的一样。
- pathname 返回url中的目录或文件名
- port 返回url中指定的端口号。
- protocol 返回页面使用的协议,通常是http:或https:
- search 返回url的查询字符串,这个字符串以问号开头。
1. 使用查询字符串参数
function getQueryStringArgs() { var qs = (location.search.length > 0 ? location.search.substring(1) : ""), // 获取查询字符串 args = {}, // 存储数据的对象 items = qs.length ? qs.split("&") : [], // 得到键值对组成的数组 item = null, // 用户遍历每一个键值对 name = null, // 每一个键值对中的key value = null, // 每一个键值对中的value // 在for循环中使用 i = 0, len = items.length; for (i = 0; i < len; i++) { item = items[i].split("="); name = decodeURIComponent(item[0]); value = decodeURIComponent(item[1]); if (name.length) { args[name] = value; } } return args; }
2. 位置操作
使用location对象可以通过很多方式改变浏览器的位置,assign方法是比较常用的。
location.assign('http://www.cnblogs.com');
他和下面的几种方法也是等价的:
location.href = "http://www.cnbolgs.com"; window.location = "http://www.cnblogs.com";
location = "http://www.cnblogs.com";
另外,修改location对象的其他属性也可以改变当前加载的页面。
// 当前url: https://cn.vuejs.org/v2/api/#选项-数据 location.hash = "#props"; // 执行之后,浏览器中的location就会发生改变。
当然,location.search、location.hostname、location.pathname、location.port都是可以直接改变的。
注意: 每次修改location的属性(hash除外),页面都会以新url重新加载。 还可以看到,和字符串不同,修改字符串,本身是不可变的,而location发生了变化。
3. replace方法
我们之前的方法都会在浏览器的历史记录中添加一条历史记录,修改hash值也会添加一个新纪录。 并且可以通过回退按钮回退到上一个页面。
举例来说: 从A到B到C,只要修改url, 那么在历史记录中就会添加一条新的历史记录, 那么在C页面进行回退的时候就会回退到B页面,在B页面回退的时候就会回退到A页面。
但是:如果我们使用replace方法,情况就不一样了,这个方法接受一个url作为参数,即要导航到的URL,结果虽然会导致浏览器位置改变,但是不会在历史记录中生成新的记录,而是替换了之前的记录。 当前历史信息如下:
如果我这时使用 location.href = "https://cn.vuejs.org/v2/api/#props"; 那么就会插入一条新的记录,如下:
并且我们点击回退按钮也可以回退到之前的 #errorHandler 页面。
但是如果使用在#errorHandler页面的使用使用location.replace("https://cn.vuejs.org/v2/api/#props"), 那么这个props的历史记录机会替代errorHandler的历史记录, 这样,在点击回退的时候只能回退到 optionMergeStrategies页面,而不能再会退到 errorHandler页面了。
4. reload() 方法
这个方法的作用是从新加载当前的页面, 如果调用reload()时不传递任何参数,页面就会以最有效的方式重新加载,也就是说,如果页面自上次请求以来没有改变过,那么页面就会从浏览器的缓存中加载。如果要强制从服务器重新加载,那么可以像下面这样为该方法传递参数true。
location.reload(); // 重新加载(有可能从缓存中加载) location.reload(true); // 重新加载(从服务器端加载)
注意: 位于reload调用之后的代码可能会执行也可能不会,这要取决于网络延迟或系统因素等。 为此,最好把reload()放在代码的最后一行。