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. mac Chrome 快捷键

    从windows迁移到mac,会发现快捷键真的变了,这里先吹一下mac OS天下第一 另外没有bar确实也提高了效率,这一点还是值的 其实程序员最常用的是检查,windows下是F12,默认F12会被 ...

  2. Python多线程在爬虫中的应用

    题记:作为测试工程师经常需要解决测试数据来源的问题,解决思路无非是三种:(1)直接从生产环境拷贝真实数据 (2)从互联网上爬取数据 (3)自己用脚本或者工具造数据.前段时间,为了获取更多的测试数据,笔 ...

  3. 每日算法之三十四：Multiply Strings

    大数相乘,分别都是用字符串表示的两个大数.求相乘之后的结果表示. 首先我们应该考虑一下測试用例会有哪些,先准备測试用例对防御性编程会有比較大的帮助.可以考虑一些极端情况.有以下几种用例: 1)&quo ...

  4. AJAX(二)-实现验证码异步验证功能

    案例实现效果 用户在前端输入验证码,按键收起触发异步验证,验证验证码的对错 前端代码 checkcode.jsp <%-- Created by IntelliJ IDEA. User: cxs ...

  5. Leetcode696.Count Binary Substrings计算二进制字串

    给定一个字符串 s,计算具有相同数量0和1的非空(连续)子字符串的数量,并且这些子字符串中的所有0和所有1都是组合在一起的. 重复出现的子串要计算它们出现的次数. 示例 1 : 输入: "0 ...

  6. pymysql.err.OperationalError: (2013, 'Lost connection to MySQL server during query')

    pymysql错误: pymysql.err.OperationalError: (2013, 'Lost connection to MySQL server during query') pymy ...

  7. Hdu 4597记忆化搜索

    好久没有做题了,水平已经完全在学弟之下了. 一个吉林邀请赛最水的题目.:( 其实这题一看到数据范围,只可以想到思路,直接爆搜,加个记忆化. 这题虽然A了,但是我还是没太想清楚一些边界情况,心虚着A了. ...

  8. Ceph 之 Background on http frontends

    Background on http frontends -civetweb frontend --thread per connection, requires a lot of threads - ...

  9. oracle-12333错误

    Errors in file /oracle/OraHome1/admin/hndw/udump/hndw_ora_17941.trc: ORA-00600: internal error code, ...

  10. Servlet会话跟踪和Cookies及HttpSession会话

    会话只是指一段指定的时间间隔. 会话跟踪是维护用户状态(数据)的一种方式.它也被称为servlet中的会话管理. Http协议是一个无状态的,所以我们需要使用会话跟踪技术来维护用户状态. 每次用户请求 ...