hash---------history

hash是什么

hash 属性是一个可读可写的字符串，该字符串是 URL 的锚部分，一般有当前页面中href中#地址触发

• hash的改变不会导致页面重新加载；

• 使用浏览器访问网页时，如果网页URL中带有hash，页面就会定位到id（或name）与hash值一样的元素的位置；

• 通过window.location.hash属性获取和设置hash值。

当hash值发生变化时会触发该事件，a标签的href为一个锚链接

当被点击时：浏览器地址栏会发生如下变化

​ file:///C:/Users/Administrator/Desktop/3.16/05/%E4%BB%A3%E7%A0%81/pra.html
=>
​ file:///C:/Users/Administrator/Desktop/3.16/05/%E4%BB%A3%E7%A0%81/pra.html#id

hashchange事件

（window.onhashchange）

onhashchange 事件在当前 URL 的锚部分(以 ‘#’ 号为开始) 发生改变时触发 。

window.addEventListener('hashchange', function(e) {
    
	console.log(e.oldURL) // 改变前的链接
	console.log(e.newURL) // 改变后的链接
	
})

window.location.href和window.location.hash和window.location.search

（1）window.location.href 得到的是完整的URL

​ url= “www.baidu.com”

​ 比如：window.location.href = ’ www.baidu.com’

（2）window.location.hash 得到的是锚链接

​ url= “www.baidu.com#all”

​ 比如：window.location.hash= ’ #all’

（3）window.location.search得到的是URL‘？’号后面的字符串部分

​ url= “www.baidu.com/?username=aaa&age=10”

​ 比如：window.location.search= ’ ?username=aaa&age=10’

history

History.pushState()

该 **history.pushState()**方法向浏览器的会话历史堆栈添加一个条目。

语法:

pushState(state, unused)
pushState(state, unused, url)

参数:

state

该state对象是一个 JavaScript 对象，它与由pushState(). 每当用户导航到 new时，都会触发state一个事件，并且该事件的属性包含历史条目 对象的副本。

state对象可以是任何可以序列化 的对象。因为 Firefox 将state对象保存到用户的磁盘，以便在用户重新启动浏览器后可以恢复它们，所以我们对state对象的序列化表示施加了 16 MiB 的大小限制。如果将 state序列化表示大于此的对象传递给pushState()，则该方法将引发异常。如果您需要比这更多的空间，我们鼓励您使用sessionStorage和/或localStorage.

unused

该参数因历史原因而存在，不能省略；传递空字符串对于将来对该方法的更改是安全的。

url

新历史条目的 URL 由该参数给出。请注意，在调用 之后，浏览器不会尝试加载此 URL pushState()，但它可能会在稍后尝试加载 URL，例如在用户重新启动浏览器之后。新的 URL 不需要是绝对的；如果是相对的，则相对于当前 URL 进行解析。新 URL 必须与当前 URL同源；否则，pushState()将抛出异常。如果未指定此参数，则将其设置为文档的当前 URL。

描述:

从某种意义上说，调用pushState()类似于设置window.location = "#foo"，两者都将创建和激活与当前文档关联的另一个历史条目。但是pushState()有几个优点：

• 新 URL 可以是与当前 URL 同源的任何 URL。相反，window.location只有当您只修改哈希时，设置才能让您保持在同一个文档中。
• 如果您不想更改 URL，则不必更改。相反，设置window.location = "#foo";仅在当前哈希不是时创建一个新的历史条目#foo。
• 您可以将任意数据与新的历史记录条目相关联。使用基于散列的方法，您需要将所有相关数据编码为一个短字符串。

frame

frameset

划分的时候需要 去掉body标签

思路: 先横向划分(指定高度),在纵向划分(指定宽度)

链接的 target 属性

用法：

值	描述
_blank	在新窗口中打开被链接文档。
_self	默认。在相同的框架中打开被链接文档。
_parent	在父框架集中打开被链接文档。
_top	在整个窗口中打开被链接文档。
framename	在指定的框架中打开被链接文档。

注意：前四种是系统默认的，同时 _blank和 _self(默认)用的最多；

​ 而第五种是在使用***frameset框架集***的时候才能用，而且必须给框架起名字

​ 而且名字不能以下划线 _开头，否则会被浏览器忽略。