一、獲取URL
top.location可以用來獲取當前窗口(或幀)的URL地址。例如:
var url = top.location.href; console.log(url); // 打印當前頁面的URL地址
使用top.location.href可以簡單地重定向到新的URL地址:
top.location.href = 'http://www.example.com';
二、修改URL
可以使用top.location對當前URL地址進行修改。
使用top.location.replace將當前URL地址替換為新的URL地址:
top.location.replace('http://www.example.com');
使用top.location.assign可以在不丟失當前URL歷史記錄的情況下,跳轉到新的URL地址:
top.location.assign('http://www.example.com');
使用top.location.reload可以重新加載當前URL:
top.location.reload();
三、獲取URL的不同部分
top.location可以用來獲取URL的不同部分,包括協議、主機、路徑、查詢參數、錨點。
1. 協議:
var protocol = top.location.protocol; console.log(protocol); // 打印當前頁面的協議,如:http、https、file等
2. 主機:
var hostname = top.location.hostname; console.log(hostname); // 打印當前頁面的主機,如:www.example.com
3. 路徑:
var pathname = top.location.pathname; console.log(pathname); // 打印當前頁面的路徑,如:/folder/index.html
4. 查詢參數:
var search = top.location.search; console.log(search); // 打印當前頁面的查詢參數,如:?key1=value1&key2=value2
5. 錨點:
var hash = top.location.hash; console.log(hash); // 打印當前頁面的錨點,如:#section1
四、使用top.location的注意事項
1. top.location只能用於當前窗口或幀。
2. 使用top.location跳轉頁面時,需要注意跨域問題。
3. top.location雖然可以獲取任意URL的不同部分,但不建議在生產環境中使用,因為該方法有安全風險(例如:可能被用於進行跨站腳本攻擊)。
五、總結
top.location是一個非常實用的屬性,可以用於獲取、修改當前頁面的URL地址,以及獲取URL的不同部分。但在使用時需要注意安全問題和跨域問題。
原創文章,作者:小藍,如若轉載,請註明出處:https://www.506064.com/zh-hant/n/151298.html