Location 对象:封装了浏览器地址栏的 URL 信息
一、hash
返回 URL
中 hash(#后跟零个或者多个字符), 如果不包含, 返回空字符串
#
位置标识符 : 当前页面的位置信息, 比如: 跳转顶部
console.log(location.hash); // ""
二、host
: 返回服务器名称和端口号
console.log(location.host); // "localhost:63342"
三、hostname
: 返回不带端口号的服务器名称
console.log(location.hostname); // localhost
四、href
: 返回当前价在页面的完整 URL
console.log(location.href); // http://localhost:63342/htmlcss/22_javascript%E5%9F%BA%E7%A1%80/day_12_ES6/03_BOM%E6%93%8D%E4%BD%9C/02_location%E5%AF%B9%E8%B1%A1.html?_ijt=hiop2dovhunhqnn2udlbo9ncbulocation.href = 'www.baidu.com'; // 跳转到其他页面
如果直接将 location.href
属性修改为一个绝对路径(或相对路径),则页面会自动跳转到该路径,并生成相应的历史记录。
五、pathname
: 返回 URL
中的 目录 和 文件名
console.log(location.pathname); // /htmlcss/22_javascript%E5%9F%BA%E7%A1%80/day_12_ES6/03_BOM%E6%93%8D%E4%BD%9C/02_location%E5%AF%B9%E8%B1%A1.htmlAndCss
六、port
: 返回 URL
中执行的端口号
如果 URL
中不包含端口号, 则返回空字符串
console.log(location.port); // 63342
七、protocol
: 返回页面使用的协议, 通常指的是 http
/ https
console.log(location.protocol); // http:
八、search
: 返回 URL
的查询字符串, 这个字符串以 ?
开头
console.log(location.search); // ?_ijt=hiop2dovhunhqnn2udlbo9ncbu
Location 对象的方法
一、location.reload()
– 刷新页面
location.reload(); // 重新加载当前页面location.reload(true); // 在方法中传递一个 true,则会强制清空缓存刷新页面
二、location.assign(str)
– 跳转页面
location.assign('www.baidu.com'); // 作用和直接修改 location.href 一样。
三、location.replcace()
– 替换当前页面
location.replace('http://www.baidu.com');
使用一个新的页面替换当前的页面,调用完毕也会跳转页面。但不会生成历史纪录,不能使用(后退按钮)后退。
四、encodeURI('')
– 中文 - URI编码
console.log('恰饭'); // %E6%81%B0%E9%A5%AD
五、decodeURI('')
– URI编码 - 中文
console.log('%E6%81%B0%E9%A5%AD'); // 恰饭
History 对象
history
对象:可以用来操作浏览器的向前或向后翻页。
history.length;
获取浏览器历史列表中的 url
数量。注意,只是统计当次的数量,如果浏览器关了,数量会重置为 1
history.back();
– 用来回退到上一个页面,作用和浏览器的[回退按钮]一样。
history.forward();
– 用来跳转下一个页面,作用和浏览器的[前进按钮]一样。
history.go();
– 向前 / 向后跳转 n 个页面。
history.go(1); // 向前跳转一个页面,相当于 history.forword()
history.go(2); // 向前跳转两个页面
history.go(0); // 刷新当前页面
history.go(-1); // 向后跳转一个页面,相当于 history.back()
history.go(-2); // 向后跳两个页面