每次接觸到window.location的時候都只會用一些簡單的辐真,并不能知道其真正的含義,今天就來好好總結(jié)一下吧....
1.location.hash?
location.hash指的是#后面的錨部分,返回的值是包含#的殃姓,也可以利用location.hash = '456'或者location.hash = '#456'來設(shè)置鏈接的錨部分的值凡蚜,和下面的lcoation.search一樣,也是不能跨域獲取和設(shè)置的
2.location.host?
location.host指的是獲取鏈接當(dāng)中的主機(jī)名及端口號耻蛇,如百度的獲取到的是www.baidu.com踪蹬,當(dāng)然也可以使用location.host = 'localhost:3000'來設(shè)置url中的主機(jī)名和端口號(設(shè)置了之后可能會引起頁面的跳轉(zhuǎn)噢)
3.location.hostname?
location.hostname指的是獲取url中的主機(jī)名,如:'localhost:3000'獲取的就是localhost臣咖,當(dāng)然也可以使用location.hostname = 'www.baidu.com'來設(shè)置主機(jī)名(注意設(shè)置了之后可能會引起頁面的跳轉(zhuǎn))
4.location.href?
location.href指的是獲取頁面的完整的url,通過給location.href設(shè)置值跃捣,可以實現(xiàn)頁面跳轉(zhuǎn),如location.href = 'http://www.baidu.com'跳轉(zhuǎn)到百度頁面
在嵌入iframe標(biāo)簽的時候,如果在iframe頁面中使用的是self.location.href = ***(注意location.href和這個效果一樣),是將iframe窗口的頁面做跳轉(zhuǎn)夺蛇,如果使用top.location.href = ***,是將iframe的頂級窗口的頁面做跳轉(zhuǎn)疚漆,如果使用parent.location.href = ***,是將iframe的上一級窗口做跳轉(zhuǎn)
經(jīng)過試驗,在iframe頁面和父頁面及頂層頁面不是一個域中刁赦,如果使用top.location.href和parent.location.href也是可以使相應(yīng)的頁面跳轉(zhuǎn)的娶聘,還發(fā)現(xiàn)一個有趣的事情,在頁面一加載進(jìn)來就跳轉(zhuǎn)了頁面(采用location.href或者其他)甚脉,竟然沒有瀏覽器的返回按鈕丸升,如果采用的點擊事件的方式,瀏覽器是有跳轉(zhuǎn)按鈕的
雖然在iframe頁面中宦焦,可以讓上一級頁面跳轉(zhuǎn)发钝,但是在不同域的情況下顿涣,想獲得上一級頁面的url的地址信息是獲取不到的,因為跨域了
此處要引出一個知識點localStorage是否也有這樣的top,parent的方法呢酝豪?
經(jīng)過驗證是不行的涛碑,跨域了,所以localStorage等一定要是同源的啊
注意使用location.href的時候可以使用絕對路徑孵淘,也可以使用相對路徑蒲障,還可以使用根路徑,如location.href = '/index.html','/'就表示到根路徑下面
5.location.pathname?
location.pathname指的是獲取url的路徑部分瘫证,如http://localhost:8080/jquery/jquery.html揉阎,獲得的是/jquery/jquery.html(記得前面有斜杠噢),也可以設(shè)置哦,設(shè)置后頁面會跳轉(zhuǎn)背捌,記得設(shè)置的時候要和得到這個值的時候一樣毙籽,設(shè)置成/jquery/***.html不能設(shè)置成相對路徑和絕對路徑等
6.location.port?
location.port指的是返回當(dāng)前頁面的端口號,如上面的url鏈接當(dāng)中返回的是8080毡庆,也可以設(shè)置端口坑赡,也會實現(xiàn)頁面的跳轉(zhuǎn)
7.location.protocol?
location.protocol是指獲取頁面的協(xié)議,如http://localhost:8080/jquery/jquery.html獲取的是http:(記得有:噢)么抗,也可以設(shè)置毅否,設(shè)置的時候盡量也帶冒號(雖然不帶對使用沒有影響),如果設(shè)置成https:蝇刀,發(fā)現(xiàn)是可以跳轉(zhuǎn)的(只是會提示不安全)
8.location.search?
location.search只是獲取頁面?后面的部分(包含問號)螟加,如果設(shè)置location.search = '123'或者location.search = '?123'(建議采用這種寫法),是設(shè)置問號后面的參數(shù)吞琐,是整個替換噢捆探,并不是添加,如果在子iframe里面站粟,跨域設(shè)置父頁面的?后面徐许,是設(shè)置不了的,會報跨域的錯誤卒蘸,同樣獲取也是獲取不到的,同源的是可以設(shè)置的翻默,注意缸沃,如果后面有#,就到#前為止
9.location.assign()?
location.assign(url)是指加載一個新的文檔修械,和location.href一樣趾牧,是可以設(shè)置相對路徑、絕對路徑肯污、根路徑的翘单,百度上面看到很多說法吨枉,有說location.assign跳轉(zhuǎn)的頁面,可以點擊瀏覽器后退哄芜,后來發(fā)現(xiàn)一進(jìn)入頁面就location.assign(url)跳轉(zhuǎn)鏈接的貌亭,瀏覽器并沒有后退按鈕,但是如果是在某一個標(biāo)簽上面綁定事件跳轉(zhuǎn)的是有后退按鈕的认臊,后來我在想此處說可以后退圃庭,是否是指調(diào)用history.go(-1),可以后退失晴,后來發(fā)現(xiàn)也是要點擊的調(diào)用這個方法可以后退剧腻,一進(jìn)入這個頁面的,并不能后退涂屁,當(dāng)加入一個定時器是可以返回的
10.location.reload()?
location.reload(參數(shù))书在,刷新當(dāng)前頁面,瀏覽器是沒有后退按鈕的拆又,當(dāng)沒有參數(shù)或者參數(shù)為false的時候儒旬,瀏覽器會利用HTTP的If-Modified-Since來檢測服務(wù)器的文檔是否改變了,如果沒有改變遏乔,就會重緩存中讀取文件义矛,如果改變了就會重新下載文件,如果參數(shù)為true盟萨,都會直接在瀏覽器上面下載該文件
11.location.replace(url)?
location.replace(url)是指用新文檔替換當(dāng)前文檔里面的內(nèi)容凉翻,url也可以是相對路徑,絕對路徑和根路徑捻激,使用location.replace(url)是沒有后退按鈕的制轰,不管哪種情況