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

来源:https://www.cnblogs.com/showcase/archive/2019/06/21/11065323.html
-Advertisement-
Play Games

首先要知道Location這個對象以及這個對象中的一些屬性: href:設置或返回完整的url.如本博客首頁返回http://www.cnblogs.com/wymninja/ host:設置或返回主機名和當前的URL的埠號。本博客首頁返回www.cnblogs.com hostname:設置或返 ...


首先要知道Location這個對象以及這個對象中的一些屬性:

href:設置或返回完整的url.如本博客首頁返回http://www.cnblogs.com/wymninja/

host:設置或返回主機名和當前的URL的埠號。本博客首頁返回www.cnblogs.com

hostname:設置或返回當前URL的主機名。本博客首頁返回www.cnblogs.com

hash:設置或返回從井號(#)開始的URL(錨)。本博客首頁返回 空

pathname:設置或返回當前URL的路徑部分。本博客首頁返回/wymninja/

port:設置或返回當前URL的埠號。本博客首頁返回 空

protocol:設置或返回當前URL的協議。本博客首頁返回 http:

search:設置或返回從問號 (?) 開始的 URL(查詢部分)

location對象屬性圖示:圖片來自慕課網

location的href屬性存放的是文檔的完整 URL,其他屬性則分別描述了 URL 的各個部分。這些屬性與 Anchor 對象(或 Area 對象)的 URL 屬性非常相似。當一個 Location 對象被轉換成字元串,href 屬性的值被返回。這意味著你可以使用表達式 location 來替代 location.href。不過 Anchor 對象表示的是文檔中的超鏈接,Location 對象表示的卻是瀏覽器當前顯示的文檔的 URL(或位置)

var s = location.toString();
console.log(s);
#result
//http://www.cnblogs.com/wymninja/

 

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

Location對象還有三個方法:assign()、reload()、replace()

assign():載入新的文檔

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

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

註意:

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

所以要獲取瀏覽器URL中查詢字元串的參數。也就是location.search部分。以慕課網圖片為例就是?courseid = 8&cahpterid = 86中的8和86!!!!然後就利用如下代碼:

function getQuery(name){
  var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);//從?之後開始匹配如getQuery(courseid)返回一個數組["courseid=8","","8","&",index:0,input:"courseid=8"]
if (r!=null) return unescape(r[2]); return null; }

其中:

對match不清楚可查閱我的博客Javascript string對象

unescape 對參數進行解碼,如空格解碼為20%。

 

原文:https://www.cnblogs.com/wymninja/p/5716317.html


您的分享是我們最大的動力!

-Advertisement-
Play Games
更多相關文章
  • [2019.06.21 學習筆記2] 1.標題標簽 2.<h1>到<h6>的字體是從大到小,都是加粗,沒有<h7> 3.如果要重定義<h>標簽的樣式,修改css樣式中的font-weight(字體粗細)、font-size(字體大小) ...
  • [2019.06.21 學習筆記1] 1.<a>定義超鏈接 2.必須屬性href,鏈接位置,對應一個url地址,href="url地址",顯示藍色並帶有下劃線(可去掉),必須寫(不寫也可以,但是最好寫) 不想指向任何頁面:href="#" <!-- 指向當前頁面最頂部,點擊後不會發生跳轉--> 指向 ...
  • highchart圖表的一個常見問題是不能複製文字 比如官網的某個圖表例子,文字不能選擇,也無法複製,有時產品會抓狂... 本文給出一個簡單的方案,包括一些解決的思路,希望能幫助到有需要的人 初期想了蠻久也搜了蠻多,沒搜到,找到的結論是圖表使用的是svg實現,必然無法選擇文字,似乎是個死問題,已經瀕 ...
  • 實現代碼如下: 一、Html代碼 二、jQuery代碼 ...
  • 註: ** 先來說下前端為什麼需要學習webpack吧!** 因為現在SPA流行,javascript的依賴包,less,scss.sass樣式文件的編譯。 更重要的是前端現在三大主流Vue.js 、React.js和AngluarJs都和webpack緊緊相連了。 說實話,現在不會一點webpac ...
  • 1.移動端視口問題 視口是指瀏覽器的可視區域,移動端的視口到底是多寬呢? 現在市面上的大部分手機,比如iphone X,它的預設視口寬度為980px,而一個iphone X的屏幕寬度僅僅為375px。看到問題了嗎?一個寬度只有375像素的手機,卻能夠顯示寬度為980像素的網頁,自然而然,網頁會被縮小 ...
  • filter 將模糊或者顏色偏移等圖像效果用於元素,通常用於調整圖像,背景和邊框的渲染 css 標準中已內置一些預定義效果的函數,也可通過url使用 "SVG濾鏡" 語法 濾鏡屬性 需要設定某一函數的值。如果該值無效,函數返回“none“。 url() url 函數接收一個XML文件,該文件是一個 ...
  • 今天是2019年6月21日,周五了。在這裡寫上一篇隨筆,主要內容是css基礎中的一些細節部分,話不多說,直接上! 一、背景漸變: background-image 線性漸變:linear-gradient(漸變方向,色標,色標,色標) 方向: 關鍵字: to top 從下往上 to bottom 從 ...
一周排行
    -Advertisement-
    Play Games
  • 移動開發(一):使用.NET MAUI開發第一個安卓APP 對於工作多年的C#程式員來說,近來想嘗試開發一款安卓APP,考慮了很久最終選擇使用.NET MAUI這個微軟官方的框架來嘗試體驗開發安卓APP,畢竟是使用Visual Studio開發工具,使用起來也比較的順手,結合微軟官方的教程進行了安卓 ...
  • 前言 QuestPDF 是一個開源 .NET 庫,用於生成 PDF 文檔。使用了C# Fluent API方式可簡化開發、減少錯誤並提高工作效率。利用它可以輕鬆生成 PDF 報告、發票、導出文件等。 項目介紹 QuestPDF 是一個革命性的開源 .NET 庫,它徹底改變了我們生成 PDF 文檔的方 ...
  • 項目地址 項目後端地址: https://github.com/ZyPLJ/ZYTteeHole 項目前端頁面地址: ZyPLJ/TreeHoleVue (github.com) https://github.com/ZyPLJ/TreeHoleVue 目前項目測試訪問地址: http://tree ...
  • 話不多說,直接開乾 一.下載 1.官方鏈接下載: https://www.microsoft.com/zh-cn/sql-server/sql-server-downloads 2.在下載目錄中找到下麵這個小的安裝包 SQL2022-SSEI-Dev.exe,運行開始下載SQL server; 二. ...
  • 前言 隨著物聯網(IoT)技術的迅猛發展,MQTT(消息隊列遙測傳輸)協議憑藉其輕量級和高效性,已成為眾多物聯網應用的首選通信標準。 MQTTnet 作為一個高性能的 .NET 開源庫,為 .NET 平臺上的 MQTT 客戶端與伺服器開發提供了強大的支持。 本文將全面介紹 MQTTnet 的核心功能 ...
  • Serilog支持多種接收器用於日誌存儲,增強器用於添加屬性,LogContext管理動態屬性,支持多種輸出格式包括純文本、JSON及ExpressionTemplate。還提供了自定義格式化選項,適用於不同需求。 ...
  • 目錄簡介獲取 HTML 文檔解析 HTML 文檔測試參考文章 簡介 動態內容網站使用 JavaScript 腳本動態檢索和渲染數據,爬取信息時需要模擬瀏覽器行為,否則獲取到的源碼基本是空的。 本文使用的爬取步驟如下: 使用 Selenium 獲取渲染後的 HTML 文檔 使用 HtmlAgility ...
  • 1.前言 什麼是熱更新 游戲或者軟體更新時,無需重新下載客戶端進行安裝,而是在應用程式啟動的情況下,在內部進行資源或者代碼更新 Unity目前常用熱更新解決方案 HybridCLR,Xlua,ILRuntime等 Unity目前常用資源管理解決方案 AssetBundles,Addressable, ...
  • 本文章主要是在C# ASP.NET Core Web API框架實現向手機發送驗證碼簡訊功能。這裡我選擇是一個互億無線簡訊驗證碼平臺,其實像阿裡雲,騰訊雲上面也可以。 首先我們先去 互億無線 https://www.ihuyi.com/api/sms.html 去註冊一個賬號 註冊完成賬號後,它會送 ...
  • 通過以下方式可以高效,並保證數據同步的可靠性 1.API設計 使用RESTful設計,確保API端點明確,並使用適當的HTTP方法(如POST用於創建,PUT用於更新)。 設計清晰的請求和響應模型,以確保客戶端能夠理解預期格式。 2.數據驗證 在伺服器端進行嚴格的數據驗證,確保接收到的數據符合預期格 ...