2. 程式人生 > >用HTML5的內建物件解析位址列地址引數

用HTML5的內建物件解析位址列地址引數

阿新 • • 發佈：2018-12-19

HTML5的內建物件

window.location.href  //獲取或者重定url地址
window.location.search //獲取地址引數部分
window.location.hash //獲取頁面錨點或者叫雜湊值

window.location.href

window.location.href可以獲取或者重定url地址，開啟瀏覽器按F12->console，可以直接除錯觀看，如下： 在這裡插入圖片描述 我當前的地址是就是https://mp.csdn.net/mdeditor/83617741

window.location.search

還是一樣使用瀏覽器除錯工具，可以直接檢視 我們訪問地址https://fanyi.baidu.com/?aldtype=16047&key=333#en/zh/hello 在控制檯輸入window.location.search 在這裡插入圖片描述

可以看到獲取到了地址問號的引數?aldtype=16047&key=333，而且是以&符號作為分隔符。 這樣的話，我們可以用js解析這些引數。程式碼如下：

<!doctype html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>獲取位址列引數</title>
	<script type="text/javascript">
		function parseUrl(searchURL){
			searchURL = searchURL.
 
substring(1, searchURL.length);
		    var splits = searchURL.split("&");
		    kvs={};//這裡kvs=[]也行
		    for (var i = splits.length - 1; i >= 0; i--) {
    			kv=splits[i].split("=");
    			kvs[kv[0]]=kv[1];
    		}
    		return kvs;
		}
		var searchURL = window.location.search;
		var paras=parseUrl
 
(searchURL);
		// 比如我想獲取key1,key2,key3的值
		alert("key1:"+paras["key1"]+",key2:"+paras["key2"]+"key3:"+paras["key3"])
	</script>
</head>
<body>
	
</body>
</html>

我儲存為D:/code/html/Front-end/test2.html 然後我輸入訪問地址和對應的引數file:///D:/code/html/Front-end/test2.html?key1=11&key2=33&key3=dsflfsl，結果如下 在這裡插入圖片描述

window.location.hash

window.location.hash 獲取頁面錨點或者叫雜湊值，也就是位址列#號後面的部分，如下： 在這裡插入圖片描述

我的GitHub 我建了一個大資料的學習交流群 QQ：2541692705 Q群：882855741 郵箱：[email protected] 微信公眾號:程式國度 在這裡插入圖片描述

相關推薦

用HTML5的內建物件解析位址列地址引數

HTML5的內建物件 window.location.href //獲取或者重定url地址 window.location.search //獲取地址引數部分 window.location.hash

new URLSearchParams() 內建物件獲取位址列的引數 通過鍵的方式拿到值

首先宣告一下 隨便賦個值也行 let a = new URLSearchParams(location.search); 然後通過a.get()的方式輸入鍵 拿到值 就簡單點吧 拿到前一個頁面傳過來的id let id = a.get(‘id’); 這樣就可以直接拿到id了 下面這個

解析位址列中的查詢字串引數，返回物件

1.code: function getQueryStrObject() { var search = location.search, qs = search.length > 0 ? search.substring(1) : "", i

spring boot 自定義引數解析器實現form表單型別請求或位址列請求引數下劃線轉駝峰屬性

一、定義引數解析註解 @Target(value = ElementType.PARAMETER) @Retention(RetentionPolicy.RUNTIME) public @interface ParameterModel { } 二、定義抽象類AbstractCustomiz

Thymeleaf 之 內建物件、定義變數、URL引數及標籤自定義屬性_Thymeleaf

如標題所述，這篇文章主要講述Thymeleaf中的內建物件（list解析、日期格式化、數字格式化等）、定義變數、獲取URL的引數和在頁面標籤中自定義屬性的應用。 如果對Thymeleaf的基本使用、maven依賴等不清楚的可以先閱讀我的另一篇文章《Thymeleaf 之 初

js獲取位址列url引數 親測好用

程式碼 ： //獲取位址列引數 function GetQueryString(str) { let LocString = String(window.documen

使用js內建物件arguments求函式的所有引數的和

今天做一個面試題時遇到一個問題，如下： 函式 useArguments 可以接收 1 個及以上的引數。請實現函式 useArguments，返回所有呼叫引數相加後的結果。本題的測試引數全部為 Numb

HTML5 不重新整理頁面修改位址列

現在很多頁面都是用ajax來進行資料互動，但是有些場景就會比較尷尬，比如個人中心，進去點修改密碼，但是位址列沒有變，下次複製地址後進來還是個人中心，並不是修改密碼，所以就有了這個 history.pushState 這個東西，直接修改位址列的地址。   程式碼如下：hist

vue獲取位址列地址url擷取引數

vue獲取位址列地址url擷取引數 方法 （新建js檔案） export function UrlSearch(){ let name,value,str=location.href,num=str.indexOf("?"); //取得整個位址列 str=str.substr(num

ie瀏覽器位址列中文引數提交伺服器亂碼分析

今天我遇到了一個奇怪的問題。之前我通過360瀏覽器位址列輸入中文引數提交到伺服器，伺服器解析正常。如下所示： 但是在偶然的情況下，我直接啟動了myeclipse自帶的瀏覽器，結果就發現了問題： 所以我就拿到了ie瀏覽器下測試，結果是同樣的：

位址列中文引數在頁面中出現亂碼問題

專案中碰到一個問題：  在搜尋框寫入中文資料在傳送請求時，同時跳轉到另外一個page，把獲取的中文資料寫入input的value中。但是獲取到中文的資料變成亂碼  <input  class="input_page" /> 解決辦法： 請求時

封裝原生js 獲取位址列請求引數

// 獲取位址列請求引數 function getQueryString(name) { var reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)', 'i'); var result = win

JavaScript獲取位址列url引數

獲取全部引數 function getParams(url) { try { var index = url.indexOf('?'); url = ur

獲取URL位址列的引數

方法一：採用正則表示式獲取位址列引數： function GetQueryString(name) { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r = w

React Js Router 獲取位址列url引數

本文出自： 有兩種方式獲取：請用的第二種 /** * 獲取url地址 * @param name */ common.getQueryString = function (name) { let reg = new RegExp("(^|

jsp3個指令、6個動作、9個內建物件

servlet：伺服器端的小應用程式。適合編寫java邏輯程式碼，如果編寫網頁內容—痛苦。 jsp:適合編寫輸出動態內容，但不適合編寫java邏輯。 Servlet：控制器。重點編寫java程式碼邏輯 （獲取表單資料、處理業務邏輯、分發轉向） JSP：程式碼顯示模板。重點在於顯示資料

javascript高階程式設計--單體內建物件

global:單體內建物件； encodeURL(url):對url進行編碼，事實上只會對url中的空格進行編碼(%20),其他的都不會變，與之對應的是decodeURL(),換句話說只能反解析%20； encodeURLComponent(url):也是對url進行編碼，與encod

實驗三 jsp內建物件part one

<script type="text/javascript"> function validatorloginName() {          var loginName=document.get.ElementById("uname"

轉：EL表示式的11個內建物件

原文地址：https://blog.csdn.net/qq_17045385/article/details/54799998 EL是JSP內建的表示式語言 JSP2.0開始，不讓再使用Java指令碼，而是使用EL表示式和動態標籤來代替Java指令碼 ############EL替代的是<%=..

JAVA WEB JSP內建物件作業

桂 林 理 工 大 學 實  驗  報  告 班級   軟體16-1班   學號 3162052051116  姓名 張識虔   同組實驗者     &