hash---------history

hash What is it?

hash Property is a readable and writable string , The string is URL Anchor part of , There are usually in the current page href in # Address trigger

• hash Changes to the will not cause the page to reload ;

• When using a browser to access a web page , If web page URL With medium hash, The page will go to id（ or name） And hash The location of elements with the same value ;

• adopt window.location.hash attribute Get and set hash value .

When hash The event is triggered when the value changes ,a Labeled href Link for an anchor

When it's clicked ： The browser address bar will change as follows

​ 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 event

（window.onhashchange）

onhashchange The event is currently URL Anchor part of ( With ‘#’ The number is the start ) Trigger when a change occurs .

window.addEventListener('hashchange', function(e) {
    
	console.log(e.oldURL) //  Link before change 
	console.log(e.newURL) //  Changed Links 
	
})

window.location.href and window.location.hash and window.location.search

（1）window.location.href What you get is complete URL

​ url= “www.baidu.com”

​ such as ：window.location.href = ’ www.baidu.com’

（2）window.location.hash You get an anchor link

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

​ such as ：window.location.hash= ’ #all’

（3）window.location.search Get is URL‘？’ The string part after the No

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

​ such as ：window.location.search= ’ ?username=aaa&age=10’

history

History.pushState()

The **history.pushState()** Method to add an entry to the browser's session history stack .

grammar :

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

Parameters :

state

The state Object is a JavaScript object , It and by pushState(). Whenever the user navigates to new when , Will trigger state An event , And the properties of this event contain history entries Copy of object .

state An object can be anything that can be serialized The object of . because Firefox take state Object is saved to the user's disk , So that they can be restored after the user restarts the browser , So we are right state The serialized representation of the object imposes 16 MiB Size limit for . If you will state Serialization means that objects larger than this are passed to pushState(), The method will throw an exception . If you need more space than this , We encourage you to use sessionStorage and / or localStorage.

unused

This parameter exists for historical reasons , Don't omit ; Passing an empty string is safe for future changes to the method .

url

New history entry URL Given by this parameter . Please note that , Calling after , The browser will not attempt to load this URL pushState(), But it may try to load later URL, For example, after the user restarts the browser . new URL It doesn't have to be absolute ; If it's relative , Relative to the current URL To analyze . new URL Must be with the current URL Homology ; otherwise ,pushState() An exception will be thrown . If this parameter is not specified , Set it to the current... Of the document URL.

describe :

In a sense , call pushState() Similar to setting window.location = "#foo", Both will create and activate another history entry associated with the current document . however pushState() There are several advantages ：

• new URL It can be related to the current URL Any homologous URL. contrary ,window.location Only if you only modify the hash , Settings to keep you in the same document .
• If you don't want to change URL, You do not have to change . contrary , Set up window.location = "#foo"; Create a new history entry only if the current hash is not #foo.
• You can associate any data with a new history entry . Use a hash based approach , You need to encode all the relevant data into a short string .

frame

frameset

When dividing, you need Get rid of body label

Ideas : First, divide horizontally ( Specifies the height ), Divide vertically ( Specify the width )

Of the link target attribute

usage ：

value	describe
_blank	Open the linked document in a new window .
_self	Default . Open the linked document in the same frame .
_parent	Open the linked document in the parent frameset .
_top	Open the linked document in the whole window .
framename	Open the linked document in the specified frame .

Be careful ： The first four are the system default , meanwhile _blank and _self( Default ) Most used ;

​ And the fifth one is using ***frameset Frame set *** You can only use it when you need it , And you have to name the framework

​ And the name cannot be underlined _ start , Otherwise, it will be ignored by the browser .