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. 获取电脑名和Ip

    private string  GetHostNameAndIP( bool  isv4Orv6)        {            string HostName = Dns.GetHostN ...

  2. JZOJ 5455 拆网线

    Time Limits: 1000 ms Memory Limits: 65536 KB Detailed Limits Description 企鹅国的网吧们之间由网线互相连接,形成一棵树的结构.现 ...

  3. bzoj 1191 [HNOI2006]超级英雄Hero——二分图匹配

    题目:https://www.lydsy.com/JudgeOnline/problem.php?id=1191 不就是个最大匹配么. 结果WA得不行. 看TJ后发现题面上说了一旦没回答出一道题就结束 ...

  4. twisted（转）

    reactor.protocol 这两个类都在 twisted.internet 命名空间中 reactor对象是Twisted编程当中的第一步,它就是一个反应器,专门负责与服务端的连接以及监听与服务 ...

  5. vue制作幻灯片-左右移动

    组件中: <template> <div class="slide-show" @mouseover="clearInv" @mouseout ...

  6. Mac上代码开启dump的core文件生成方案

    #ifdef Q_OS_MAC struct rlimit rl; getrlimit(RLIMIT_NOFILE,&rl); rl.rlim_cur = qMin((rlim_t)OPEN_ ...

  7. jquery.dataTables的探索之路-服务端分页配置

    最近闲来无事想研究下数据表格,因为之前接触过layui和bootstrap的数据表格,本着能学多少学多少的学习态度,学习下dataTables的服务端分页配置.特与同学们一块分享下从中遇到的问题和解决 ...

  8. $(window).scrollTop() == $(document).height() - $(window).height()（底端）

    jQuery(window).height()代表了当前可见区域的大小,而jQuery(document).height()则代表了整个文档的高度,可视具体情况使用. 注意当浏览器窗口大小改变时(如最 ...

  9. Adapter小练习

    Aapter的继承关系图: Android中Adapter的是数据和视图之间的桥梁,数据在adapter中做处理,然后显示到视图上面. 一.ArrayAdapter适配器 java代码: import ...

  10. Thrift源码分析（一）-- 基本概念

    我所在的公司使用Thrift作为基础通信组件,相当一部分的RPC服务基于Thrift框架.公司的日UV在千万级别,Thrift很好地支持了高并发访问,并且Thrift相对简单地编程模型也提高了服务地开 ...