如何獲取瀏覽器URL中查詢字符串的參數?

想要知道怎樣解決這個問題,首先我們先認識一下Location對象。

Location對象包含了當前頁面與位置(url)相關的信息

URL示例:http://www.baidu.com:80/news/index.aspx?id=1&name=location#top

Location對象共定義了8個屬性:

href:聲明了當前顯示文檔的完整的URL

protocol:聲明URL的協議部分,包括后綴的冒號,例如http:

host:聲明當前URL的主機名和端口號(是hostname和port的合集),例如www.baidu.com:80

hostname:聲明當前URL的主機名,例如www.baidu.com

port:聲明當前URL的端口部分,例如80

pathname:聲明當前URL的路徑部分,例如news/index.aspx

search:聲明當前URL的查詢部分,例如?id=1&name=localhost

hash:聲明當前URL的錨的部分,例如#top,指定在文檔中的錨記的名稱

Location對象的這些屬性都是可讀可寫的,如果改變了文檔的location.href,則瀏覽器會載入新的頁面。同樣如果改變了location.hash,則頁面會跳轉到新的錨點,但此時頁面不會重載。

想必大家會想,這個與link對象的url屬性類似啊,不過link對象表示的是文檔中的超鏈接,而Location對象表示的是瀏覽器當前顯示文檔的url。

當然,Location對象還有兩個方法:reload()和replace()

reload():可以重新裝載當前文檔

replace():可以裝載一個新文檔而無須為它創建一個新的歷史記錄。也就是說,在瀏覽器的歷史列表中,新文檔將替換當前文檔。這樣就不能通過【返回】按鈕返回當前文檔了。

通過將url字符串信息賦值給窗口的location屬性來裝載新文檔,可以實現返回瀏覽。

對那些使用了框架而且顯示多個臨時也的網站來說,replace()方法比較有用,這樣臨時頁面都不被存儲在歷史列表中。

注意:

不要混淆Window對象的location屬性和Document對象的location對象。前者引用一個Location對象,后者只是一個只讀字符串,并不具有Location對象的任何特性。Document.location與document.URL是同義的。但是,當存在服務器重定向時,document.location包含的是已經裝載的URL,而location.href包含的則是原始請求的文檔的URL。

什么是查詢字符串?就是Location對象的search屬性的值,在這里指?id=1&name=location

那么用Locaton對象結合String對象的方法怎么獲取呢?可以用下面這個函數獲取:

function getQuery(name)

{

var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");

var r = window.location.search.substr(1).match(reg);

if (r!=null) return unescape(r[2]); return null;

}

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 首先要知道Location這個對象以及這個對象中的一些屬性: href:設置或返回完整的url.如本博客首頁返回h...
    ninja梅梅閱讀 1,875評論 0 1
  • Spring Cloud為開發人員提供了快速構建分布式系統中一些常見模式的工具(例如配置管理,服務發現,斷路器,智...
    卡卡羅2017閱讀 134,868評論 18 139
  • HTML標簽解釋大全 一、HTML標記 標簽:!DOCTYPE 說明:指定了 HTML 文檔遵循的文檔類型定義(D...
    米塔塔閱讀 3,310評論 1 41
  • 鴻銜書云爾鬼纏, 一汪清泉水漣...
    莫笙仁閱讀 336評論 0 0
  • 快樂的情緒很少,有個清愁因子作祟!離女主遠著,被炮灰只是分分鐘!嘆離愁悲絮,紛紛擾擾!一杯酒一壺茶,只是安了環境!...
    司竹空閱讀 217評論 0 0