JS-10 location对象

参考

http://www.w3school.com.cn/jsref/dom_obj_location.asphttp://www.cnblogs.com/china-aspx/archive/2008/04/20/1162597.htmlhttp://blog.csdn.net/baidu_31333625/article/details/54288223

简介

location是javascript里边管理地址栏的内置对象，Location 对象包含有关当前 URL 的信息。Location 对象是 Window 对象的一个部分，可通过 window.location 属性来访问。

属性

可以通过设置location.href可以直接将页面重定向url，使浏览器显示新的URL内容

location.hash

location.hash则可以用来获取或设置页面的标签值，也就是在URL中包括#在内及后面的字符。HTTP请求不包括#，#是用来指导浏览器动作的，对服务器端完全无用。

并且只改变URL中#后面的内容不会触发网页重载，浏览器只会滚动到相应的位置

比如http://domain/#admin的location.hash是”#admin”。利用这个属性值可以实现前端路由的功能。给不同页面分配不同的hash值，在页面初始化的时候，通过window.location.hash来判断用户需要访问的页面，然后通过javascript来调整显示页面。

var hash; hash=(!window.location.hash)?"#search":window.location.hash; window.location.hash=hash; //调整地址栏地址，使前进、后退按钮能使用 switch(hash){ case "#search": selectPanel("pnlSearch"); //显示普通搜索面板 break; case "#advsearch": case "#admin": }

通过window.location.hash=hash这个语句来调整地址栏的地址，使得浏览器里边的“前进”、“后退”按钮能正常使用。

浏览器跳转到指定位置

A页面某链接处定义标签a的hash值

<a href="#aa" target="_blank"></a>

在B页面指定的标题处定义相关的id

<h1 id="aa" name='aa></h1>

hashchange事件

当URL的hash值更改时，将触发hashchange事件，hashchange事件触发时，事件对象会有hash改变前的URL（oldURL）和hash改变后的URL（newURL）两个属性：

window.addEventListener('hashchange', function(e) { console.log(e.oldURL); console.log(e.newURL); }, false);

一个使用hashchange的例子：

点击小图时在当前页面上展示大图，使用返回键则返回上一页而不是退出大图状态，可以利用hashchange解决这个问题，当URL的hash改变时，虽然页面不会重新加载，但仍然会被记录到浏览器的 历史记录 中。也就是说，如果依次访问a.html、b.html、b.html#abc，然后点击后退，此时会返回b.html而不是a.html。

而且，由于hash改变了，所以会触发hashchange事件。这样一来，只要在进入大图展示状态时加上一个特定的hash，点击返回键触发hashchange时退出此状态即可。

// 假设大图展示状态的hash为imgSlider window.addEventListener('hashchange', function(e) { var re = /#imgSlider$/; if ( re.test(e.oldURL) && !re.test(e.newURL) ) { // 假设imgSlider为大图展示组件对象 imgSlider.hide(); } }, false);