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. web前端开发必备技术

    1.Vue.js是什么? Vue.js(读音 /vjuː/, 类似于 view) 是一套构建用户界面的 渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注 ...

  2. PHPStrom直接在编辑器打开php文件

    以下是自己配置PHP+Apache的开发环境,集成环境的话要换第二种方法(看个人配置):PHPStrom 如果希望直接在编辑器打开php文件,要做以下这几步配置. 第一种:非集成环境 1 2 3 第二 ...

  3. C++ std::vector指定位置插入

    使用vector,必须加上:#include <vector> 1.初始化vector,一般有这几种方式: std::vector<std::wstring> v1; //创建 ...

  4. Leetcode5.Longest Palindromic Substring最长回文字串

    给定一个字符串 s,找到 s 中最长的回文子串.你可以假设 s 的最大长度为1000. 示例 1: 输入: "babad" 输出: "bab" 注意: &quo ...

  5. Leetcode849.Maximize Distance to Closest Person到最近的人的最大距离

    在一排座位( seats)中,1 代表有人坐在座位上,0 代表座位上是空的. 至少有一个空座位,且至少有一人坐在座位上. 亚历克斯希望坐在一个能够使他与离他最近的人之间的距离达到最大化的座位上. 返回 ...

  6. 如何合并两个git commit

    把你的修改stage之后运行: git rebase -i HEAD~2 然后把第二行的pick改成squash就ok啦 note: 同理,如果要合并多个commit,把后面的2改成你想要合并的com ...

  7. LaTeX Error: File `slashbox.sty' not found. 解决办法

    从这里下载对应的文件,解压后把文件放在C:\Latex\2018\texmf-dist\tex\latex 中. 再打开cmd命令窗口,输入texhash刷新!

  8. Directx11教程(62) tessellation学习(4)

    原文:Directx11教程(62) tessellation学习(4)       现在看看四边形在不同tess factor时,四边形细分的细节,下图是tess factor1-8时候的细分.te ...

  9. 【C++】去除vector里重复元素的方法比较

    背景:构造一个无重复的白名单,之后要在里面进行二分查找.故要求名单有序,且无重复,并且要进行二分查找,所以要采用有:随机访问迭代器类型的容器.这类容器有vector,array,deque.显然要ve ...

  10. day4_python之名称空间与作用域、闭包函数、嵌套函数

    一.名称空间与作用域 名称空间:存放名字的地方,准确的说名称空间是存放名字与变量值绑定关系的地方 内置名称空间:在python解释器启动时产生,存放一些python内置的名字 全局名称空间:在执行文件 ...