訪問(wèn)與重定向 - location 對(duì)象

? location接口包含著當(dāng)前URL上的信息,DocumentWindow 接口都有這樣一個(gè)鏈接的Location,分別通過(guò) Document.locationWindow.location 訪問(wèn)

? 為了方便本文的描述,假定現(xiàn)有URL:
? http://example.com:1234/test.html?user=zfs&hobby=travel#part2

# location對(duì)象屬性

- location.href

? href是一個(gè)可讀可寫(xiě)的字符串。可以通過(guò)其設(shè)置新的鏈接地址,也可獲取現(xiàn)URL上的信息。

console.log(window.location.href)
// http://example.com:1234/test.html?user=zfs&hobby=travel#part2

?

- location.search

? search是一個(gè)可讀可寫(xiě)的屬性,讀取時(shí)返回的是當(dāng)前URL的查詢部分,包括?號(hào)。
注意】截取內(nèi)容不包含錨點(diǎn)信息

// set
location.search= URL
// get
console.log(window.location.search) // '?user=zfs&hobby=travel'

?

- location.hash

? hash是一個(gè)可讀可寫(xiě)的字符串,讀取時(shí)返回的是 URL 的錨部分,包括#號(hào)
注意】對(duì)于當(dāng)前流行的Vue項(xiàng)目,如果使用的hash路由,那么參數(shù)(search)部分也將被當(dāng)做hash來(lái)看待

// set
location.hash=anchorname
// get
console.log(location.hash) // '#part2'

vue中的hash路由模式,假設(shè)url:
https://example:1234/index.html#/personal?user=zfs&hobby=traval

console.log(window.location.hash) // '#/personal?user=zfs&hobby=traval'

?

- location.host

? host是個(gè)可讀可寫(xiě)的屬性,可設(shè)置或返回當(dāng)前URL的主機(jī)名稱和端口號(hào)

// set
location.host = host
// get
console.log(location.host)  //  'example.com:1234'

?

- location.hostname

? hostname是個(gè)可讀可寫(xiě)的屬性,可設(shè)置或返回當(dāng)前URL的主機(jī)名稱

// set
location.hostname = hostname
// get
console.log(location.hostname) // 'example.com'

?

- location.port

? 可讀可寫(xiě),設(shè)置或返回當(dāng)前主機(jī)服務(wù)端口

// set
location.port = portnumber
// get
console.log(location.port) // '1234'

?

- location.pathname

? 可讀可寫(xiě),設(shè)置或返回當(dāng)前URL路徑部分

// set 
location.pathname = path
// get
console.log(location.pathname)  //  '/index.html'

?

- location.protocol

? 可讀可寫(xiě),設(shè)置或返回當(dāng)前URL中的協(xié)議

// set
location.protocol = path
// get
console.log(location.protocol)  // http:

?

# location 對(duì)象方法

- assign()

? assign()可以載入一個(gè)新的文檔頁(yè)面

window.location.assign("http://example.com")

?

- reload()

? 重新載入當(dāng)前文檔頁(yè)面。該方法可以接受一個(gè)可選的Boolean類型參數(shù)。

? 當(dāng)為false時(shí),它就會(huì)用 HTTP 頭 If-Modified-Since 來(lái)檢測(cè)服務(wù)器上的文檔是否已改變。如果已改變,則再次下載,否則將從緩存中裝載該文檔。
? 當(dāng)為true時(shí),那么無(wú)論文檔的最后修改日期是什么,它都會(huì)繞過(guò)緩存,從服務(wù)器上重新下載該文檔。

window.location.reload(true)

?

- replace()

? 用一個(gè)新文檔取代當(dāng)前文檔,并且不會(huì)在History對(duì)象中生成一條新的記錄,將用新的URL覆蓋當(dāng)前URL

window.location.replace("http://example.com")

?

# 完整案例

var url = document.createElement('a');
url.;
console.log(url.href);      // https://developer.mozilla.org/en-US/search?q=URL#search-results
console.log(url.protocol);  // https:
console.log(url.host);      // developer.mozilla.org
console.log(url.hostname);  // developer.mozilla.org
console.log(url.port);      // (blank - https assumes port 443)
console.log(url.pathname);  // /en-US/search
console.log(url.search);    // ?q=URL
console.log(url.hash);      // #search-results-close-container
console.log(url.origin);    // https://developer.mozilla.org
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
  • 序言:七十年代末,一起剝皮案震驚了整個(gè)濱河市,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 228,238評(píng)論 6 531
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 98,430評(píng)論 3 415
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái),“玉大人,你說(shuō)我怎么就攤上這事。” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 176,134評(píng)論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)。 經(jīng)常有香客問(wèn)我,道長(zhǎng),這世上最難降的妖魔是什么? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 62,893評(píng)論 1 309
  • 正文 為了忘掉前任,我火速辦了婚禮,結(jié)果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當(dāng)我...
    茶點(diǎn)故事閱讀 71,653評(píng)論 6 408
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 55,136評(píng)論 1 323
  • 那天,我揣著相機(jī)與錄音,去河邊找鬼。 笑死,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 43,212評(píng)論 3 441
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了?” 一聲冷哼從身側(cè)響起,我...
    開(kāi)封第一講書(shū)人閱讀 42,372評(píng)論 0 288
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 48,888評(píng)論 1 334
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 40,738評(píng)論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 42,939評(píng)論 1 369
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,482評(píng)論 5 359
  • 正文 年R本政府宣布,位于F島的核電站,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 44,179評(píng)論 3 347
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 34,588評(píng)論 0 26
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 35,829評(píng)論 1 283
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個(gè)月前我還...
    沈念sama閱讀 51,610評(píng)論 3 391
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親。 傳聞我的和親對(duì)象是個(gè)殘疾皇子,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 47,916評(píng)論 2 372