书山有路勤为径,学海无涯苦作舟。 知识改变命运,行动创造未来。

BOM-location

07-2-浏览器BOM-location

location 是最有用的 BOM 对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一 些导航功能。

console.log(location);
console.log(window.location);

console.log(document.write(123));

console.log(document.location);
  • window.location == document.location == location

location打印信息

ancestorOrigins: DOMStringList {length: 0}
origin: "http://127.0.0.1:8848"
protocol: "http:"
host: "127.0.0.1:8848"
hostname: "127.0.0.1"
port: "8848"
pathname: "/web%E5%89%8D%E7%AB%AF%E6%95%99%E7%A8%8B/JavaScript%E6%95%99%E7%A8%8B/codes/07/03.html"
search: ""
hash: ""
href: "http://127.0.0.1:8848/web%E5%89%8D%E7%AB%AF%E6%95%99%E7%A8%8B/JavaScript%E6%95%99%E7%A8%8B/codes/07/03.html"
assign: ƒ assign()
reload: ƒ reload()
toString: ƒ toString()
replace: ƒ replace()
valueOf: ƒ valueOf()
Symbol(Symbol.toPrimitive): undefined
__proto__: Location

属性值

  • href
    • 当前页面的完整URL地址
  • hostname
    • URL中的服务器名称
  • host
    • URL中的服务器地址+端口号
  • hash
    • URL当中 ‘#aaa’ #号后面的字符串。
    • 如果不包含返回空。
  • pathname
    • href - origin
    • 路径信息
  • port
    • 端口
  • protocol
    • http 、https
  • search
    • 获取查询字符串 以问号开头
  • origin
    • 返回带有http:// + host

练习

			document.write("访问的页面信息<br/>");
			document.write("主机名: " + location.hostname + "<br/>");
			document.write("访问的服务器端口: "  + location.port + "<br/>");
			document.write("当前的访问请求协议: " + location.protocol  + "<br/>");
			document.write("当前的访问路径: " + location.pathname + "<br/>");
			document.write("当前的搜索关键字: " + location.search + "<br/>");
			document.write("当前的hash值: " + location.hash + "<br/>");

效果

?a=b&b=c&e=abc#aaa#bbb

images

字符串处理

  • 解决参数很多如何精准获取问题

实验代码

qdata = (location.search.length > 0 ? location.search.substring(1) : " " )
args = qdata.split("&");
console.log(args);

items = {}

for (i = 0; i< args.length; i++){
  item = args[i].split("=");
  console.log(item);

  items[item[0]] = item[1];
}

console.log(items);

实验效果

images

位置操作

更改位置,打开页面,location中的参数都可以进行替换更改,而且每次更改URL重载。

location.assign("http://www.baidu.com");
location.href = "http://www.baidu.com";
window.location = "http://www.baidu.com";

当我们使用以上方法进行操作的时候会生成浏览器中的历史记录

location.replace("http://www.baidu.com");

触发页面重新加载

  • location.reload() 可能会从缓存中加载
  • location.reload(true) 从服务器加载