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框架集***的时候才能用,而且必须给框架起名字

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

猜你喜欢

转载自blog.csdn.net/m0_63300737/article/details/125359800
今日推荐