浏览器定位和导航

1.概念

location对象提供了当前窗口中加载文档有关的信息，还提供了一些导航功能。

location对象是一个很特别的对象，它既是window对象的属性，也是document对象的属性。

换句话说，window.location和document.location引用的是同一个对象。

window.location === document.location
// true

 

两者区别：

Document对象也有一个URL属性，是文档首次载入后保存该文档的URL的静态字符串

若定位到文档的片段标识符（如#table-of-contents），Location对象会相应的更新，而document.URL不会改变

2.解析URL

如：https://www.baidu.com/

Location对象的href属性是一个字符串，包含URL的完整文本（httpsLocation.toString()

window.location.href

// 返回的就是href属性的值
// https://www.baidu.com/

 

参考网址如下：https://www.baidu.com/?name=123#password=123456&name=123#password=123456&name=123#password=123456

2.1.URL分解属性(location对象的8个属性)

window.location.href  返回当前加载页面的完整URL，Location对象的toString()方法也返回这个值（如果URL中不包括散列，则返回空字符串）
window.location.toString()=== window.location.href //true
// "https://www.baidu.com/?name=123#password=123456&name=123#password=123456&name=123#password=123456"
window.location.hash  返回第一个#之后的所有文本
// "#password=123456&name=123#password=123456&name=123#password=123456"
window.location.protocol 返回页面使用的协议
// "https:"
window.location.host 返回服务器名称和端口号（如果有）
// "www.baidu.com"
window.location.hostname 返回服务器名称（不包括端口）
// "www.baidu.com"
window.location.port 返回端口（如果URL中不包括端口号，则返回空字符串）
// ""
window.location.pathname 返回路径（返回URL中的目录和文件夹名）
// "/"
window.location.search 返回第一个？之后第一个#之前
// "?name=123"

 

location.search返回从问号到URL末尾的所有内容，但是却没有办法逐个访问其中的每个查询字符串参数

// 查询字符串参数 ,将字符串参数转换为对象的key：value
function getQueryStringArgs() {
  // 取得查询字符串并去掉开头的问号
  var qs = location.search.length > 0 ? location.search.substring(1) : '';
  // 保存数据对象
  var args = {};
  var items = qs.length > 0 ? qs.split('&') : [];
  var item = null;
  var name = null;
  var value = null;

  //   逐个将每一项添加到args对象中
  for (let i = 0; i < items.length; i++) {
    // const element = array[i];
    item = items[i].split('=');
    name = decodeURIComponent(item[0]);
    value = decodeURIComponent(item[1]);
    if (name.length > 0) {
      args[name] = value;
    }
  }
//   console.log(args);
  return args;
}
getQueryStringArgs();

 

 

2.2.location对象的3个方法

location.assign(URL)打开新的URL，并在浏览器历史记录中生成一条记录，加载给定URL的内容资源到这个Location对象所关联的对象上。

window.location = 'https://www.baidu.com/';
location.href = 'https://www.baidu.com/';
// 调用的也是location.assign()方法

location.assign = 'https://www.baidu.com/';
//假设初始 URL 为 http://www.wrox.com/WileyCDA/ 
//将 URL 修改为"http://www.wrox.com/WileyCDA/#section1" 
location.hash = "#section1"; 
//将 URL 修改为"http://www.wrox.com/WileyCDA/?q=javascript" 
location.search = "?q=javascript"; 
//将 URL 修改为"http://www.yahoo.com/WileyCDA/" 
location.hostname = "www.yahoo.com"; 
//将 URL 修改为"http://www.yahoo.com/mydir/" 
location.pathname = "mydir"; 
//将 URL 修改为"http://www.yahoo.com:8080/WileyCDA/" 
location.port = 8080; 

//  每次修改location的属性（除了hashzhiwai ）,页面都会以新的URL重新加载
//  以上任何一种方式修改URL之后，浏览器的历史记录就会生成一条记录

 

location.replace(URL) 用给定的URL替换掉当前的资源。与 assign() 方法不同的是用 replace()替换的新页面不会被保存在会话的历史 History中，这意味着用户将不能用后退按钮转到该页面。

            Location.toString()返回一个DOMString，包含整个URL。 它和读取URLUtils.href的效果相同。但是用它是不能够修改Location的值的。

 

location.reload() 重新加载当前页面，即重新加载来自当前 URL的资源。它有一个特殊的可选参数，类型为 Boolean，

 

                               该参数为true时会导致该方法引发的刷新一定会从服务器上加载数据。如果是 false或没有制定这个参数，浏览器可能从缓存当中加载页面。

location.reload() // 重新加载（可能会从缓存中加载）
location.reload(true) // 重新加载（从服务器上加载）
 

 

 

（1）window.location.assign()

window.location.assign("https://cn.bing.com/?mkt=zh-CN")
// 使窗口载入并显示指定URL中的文档

 

（2）window.location.replace()

window.location.replace("https://cn.bing.com/?mkt=zh-CN")
// 使窗口载入并显示指定URL中的文档
// 与assign类似

 

　　　　

　　两者区别：

　　　　①：replace（）方法会在载入新文档之前，从浏览历史记录里把当前文档删除

　　　　若脚本无条件载入一个新文档，replace（）方法比assign（）方法更优，否则，“后退”按钮会把浏览器带回到原始文档，而相同的脚本会再次载入新文档。

　　　　②：如果检测到用户浏览器不支持某写特性来显示功能齐全的版本，可以用replace（）方法来载入静态的HTML版本

if(!XMLHttpRequest) {
   location.replace("staticpage.html")  
}
// 如果浏览器不支持XMLHttpRequest对象
// 则重定向一个不需要Ajax的静态页面

 

（3）window.location.reload()  让浏览器重新载入当前页面

（4）片段标识符：如#top

　　不会让浏览器重新载入新的文档，只会让它滚动到文档的某个位置

location = "#top"
// 跳转至文档的顶部
// #top标识符是个特殊的例子，
// 如果文档没有id为“top”，则会跳转到文档的开始处