Location 对象属性
属性 描述
hash 设置或返回从井号 (#) 开始的 URL（锚）。
host 设置或返回主机名和当前 URL 的端口号。
hostname 设置或返回当前 URL 的主机名。
href 设置或返回完整的 URL。
pathname 设置或返回当前 URL 的路径部分。
port 设置或返回当前 URL 的端口号。
protocol 设置或返回当前 URL 的协议。
search 设置或返回从问号 (?) 开始的 URL（查询部分）。
Location 对象方法
属性 描述
assign() 加载新的文档。
reload() 重新加载当前文档。
replace() 用新的文档替换当前文档。

onhashchange事件
这是一个HTML 5新增的事件，当#值发生变化时，就会触发这个事件。
IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持该事件。
它的使用方法有三种：
　　window.onhashchange = func;
　　<body οnhashchange="func();">
　　window.addEventListener("hashchange", func, false);
对于不支持onhashchange的浏览器，可以用setInterval监控location.hash的变化。

window.history.pushState()

需要三个参数: 一个状态对象, 一个标题 (目前被忽略), 和 (可选的) 一个URL.
让我们来解释下这三个参数详细内容：
1.状态对象 — 状态对象state是一个JavaScript对象，通过pushState () 创建新的历史记录条目。
无论什么时候用户导航到新的状态，popstate事件就会被触发，且该事件的state属性包含该历史记录条目状态对象的副本。
状态对象可以是能被序列化的任何东西。原因在于Firefox将状态对象保存在用户的磁盘上，以便在用户重启浏览器时使用，
我们规定了状态对象在序列化表示后有640k的大小限制。
如果你给 pushState() 方法传了一个序列化后大于640k的状态对象，该方法会抛出异常。
如果你需要更大的空间，建议使用 sessionStorage 以及 localStorage

2.标题 — Firefox 目前忽略这个参数，但未来可能会用到。
在此处传一个空字符串应该可以安全的防范未来这个方法的更改。
或者，你可以为跳转的state传递一个短标题。

3.URL — 该参数定义了新的历史URL记录。
注意，调用 pushState() 后浏览器并不会立即加载这个URL，但可能会在稍后某些情况下加载这个URL，
比如在用户重新打开浏览器时。新URL不必须为绝对路径。
如果新URL是相对路径，那么它将被作为相对于当前URL处理。
新URL必须与当前URL同源，否则 pushState() 会抛出一个异常。
该参数是可选的，缺省为当前URL。

history.replaceState() 的使用与 history.pushState() 非常相似，
区别在于 replaceState() 是修改了当前的历史记录项而不是新建一个。
注意这并不会阻止其在全局浏览器历史记录中创建一个新的历史记录项。
replaceState() 的使用场景在于为了响应用户操作，你想要更新状态对象state或者当前历史记录的URL。

window.onpopstate是popstate事件在window对象上的事件处理程序.
每当处于激活状态的历史记录条目发生变化时,popstate事件就会在对应window对象上触发.
如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的,
则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝.
调用history.pushState()或者history.replaceState()不会触发popstate事件.
popstate事件只会在浏览器某些行为下触发,
比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法).
当网页加载时,各浏览器对popstate事件是否触发有不同的表现,Chrome 和 Safari会触发popstate事件, 而Firefox不会.

History和Location的更多相关文章

  1. history／location操作 ／navigator 操作／ screen操作

    话说mac真的没广告...就凭这点,mac完胜.ei capitan 好牛畅,分屏很好用啊,回不去了. var hist=window.history; hist.go(param); // para ...

  2. JS浏览器对象：window对象、History、Location对象、Screen对象

    一.JS浏览器对象-window 1.window对象 window对象是BOM的核心,window对象指当前的浏览器窗口 所有JavaScript全局对象.函数以及变量均自动成为window对象的成 ...

  3. JavaScript（JS）之Javascript对象BOM，History，Location，Function...（二）

    https://www.cnblogs.com/haiyan123/p/7594046.html 在JavaScript中除了null和undefined以外其他的数据类型都被定义成了对象,也可以用创 ...

  4. JS BOM对象 History对象 Location对象

    一.BOM对象 BOM(浏览器对象模型),可以对浏览器窗口进行访问和操作 window对象 所有浏览器都支持 window 对象. 概念上讲.一个html文档对应一个window对象. 功能上讲: 控 ...

  5. 【JavaScript】BOM对象——Window对象&History对象&Location 对象

    1.Window对象: 表示浏览器中打开的窗口 setInterval():它有一个返回值,主要是提供给 clearInterval 使用. setTimeout():它有一个返回值,主要是提供给 c ...

  6. 前端-2019 history 与 location

    HTML5 API解析之Window.history历史记录 1.简介 window.history是用来保存用户在一个会话期间的网站访问记录,并提供相应的方法进行追溯.其对应的成员如下: 方法:ba ...

  7. location对象及history对象

     history对象 location 是最有用的BOM对象之一,它提供了与当前窗口中加载的文档有关的信息,还提供了一些导航功能.事实上,location 对象是很特别的一个对象,因为它既是windo ...

  8. location和history

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title> ...

  9. 关于window.history.back()后退问题

    Windows下的window.history.back()后退后返回的不仅仅是前一个页而是前一个页的状态.假设一个页我改动了3次那必须后退3次才干回到前一个页.并且数据库中删除的数据依旧显示在上面感 ...

随机推荐

  1. gawc全球城市

    http://www.lboro.ac.uk/gawc/world2016t.html Global city From Wikipedia, the free encyclopedia     Pa ...

  2. IDG资本全球拼图：近10年揽26家独角兽，最敢出手VC再造"VC+"

    IDG资本全球拼图:近10年揽26家独角兽,最敢出手VC再造"VC+" 2017-04-01 15:33   两天前,IDG资本合伙人过以宏提出的“VC+”,又有了新的内涵——全球 ...

  3. 一款优秀的前端JS框架—AngularJS

      前  言 AngularJS 是一个 JavaScript 框架.它可通过 <script> 标签添加到 HTML 页面. AngularJS 通过 指令 扩展了 HTML,且通过 表 ...

  4. POJ1485 Sumdiv

    Sumdiv Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 22680   Accepted: 5660 Descripti ...

  5. JavaScript--封装好的运动函数+旋转木马例子

    封装好的运动函数: 1.能控制目标元素的多种属性 2.能自动获取元素的样式表: 3.获取样式函数兼容 4.能对于元素的多属性进行动画(缓动动画)修改 5.能区分透明度等没单位的属性和px属性的变化 a ...

  6. springboot集成mongoDB 异常认证

    1.springboot连接mongoDB 出现异常认证 异常详情: com.mongodb.MongoSecurityException: Exception authenticating Mong ...

  7. iOS 9 学习系列：Split Screen Multitasking

    http://www.cocoachina.com/ios/20151010/13601.html iOS 9 的一个重大变化就是增加了多任务,这个多任务允许用户在屏幕上同时运行多个 app.有两种形 ...

  8. 阿里云对象存储OSS支持版本管理特性

    阿里云对象存储OSS现已经全面支持“对象版本管理”特性.该功能适用于所有的存储类型以及区域.当Bucket启用该特性后,“对象版本管理”功能可以保护和恢复误删除.误覆盖的数据. 对象存储OSS“版本管 ...

  9. JavaScript学习之setTimeout

    <JavaScript权威指南>第四版中说“window对象方法setTimeout()用来安排一个JavaScript的代码段在将来的某个指定时间运行”. setTimeout(foo, ...

  10. LeedCode OJ -- String to Integer (atoi)

    点击打开题目链接 题目意思就是自己实现一个atoi函数,也就是将字符串转换成int型. 关于INT_MAX和INT_MIN, 只是在<limits.h>文件中定义的宏..分别是int型可以 ...