JavaScript URL傳值過程中遇到的問題及知識點總結

Web系統開發過程中經常用到URL進行傳值，剛剛接觸時不太會解析，會出現中文亂碼問題等。

1、父子頁面之間的傳值（在一個頁面中以載入iframe框架的形式調出另一個頁面）。

var URL=“XXXX..?code=aaa&name=liming&age=123”；

在子頁面中進行解析時：

var href=window.location.href;  //獲取到當前的地址

然後以截取字元串的形式獲取相應的參數值（截取字元串的方式適用於參數較少的情況，如果參數較多則不適合）；

var code=href.substring(href.indexOf('=')+1,href.indexOf('&'));

.........一次類推獲取所有參數。

2、由於URL編碼規範中中文屬於不合法字元，所以需要編碼成合法的URL。

JavaScript中提供的全局函數：

頂層函數（全局函數）

例如：

var url="XXXXX..?code=111&name=曉明&age=123";

window.location.assign(encodeURL(url));

在另一個頁面解析的時候為：

var href=decodeURL(location.href);

定義一個函數方便獲取url中的參數

函數1：(當參數中沒用中文的時候使用)

function getURLParameter(){

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

     var href = decodeURI(location.href);            

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

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

     return null;

}

函數2：(當參數中用中文的時候使用)

function getURLParameter(name) {            

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

     var l = decodeURI(window.location.search);            

     var r = l.substr(1).match(reg);            

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

     return null;        

}

對應的知識點：

RegExp 對象

RegExp 對象表示正則表達式，它是對字元串執行模式匹配的強大工具。

語法：new RegExp(pattern, attributes);

·

參數

參數 pattern 是一個字元串，指定了正則表達式的模式或其他正則表達式。

參數 attributes 是一個可選的字元串，包含屬性 "g"、"i" 和 "m"，分別用於指定全局匹配、區分大小寫的匹配和多行匹配。ECMAScript 標準化之前，不支持 m 屬性。如果 pattern 是正則表達式，而不是字元串，則必須省略該參數。

返回值

一個新的 RegExp 對象，具有指定的模式和標誌。如果參數 pattern 是正則表達式而不是字元串，那麼 RegExp() 構造函數將用與指定的 RegExp 相同的模式和標誌創建一個新的 RegExp 對象。

如果不用 new 運算符，而將 RegExp() 作為函數調用，那麼它的行為與用 new 運算符調用時一樣，只是當 pattern 是正則表達式時，它只返回 pattern，而不再創建一個新的 RegExp 對象。

拋出

SyntaxError - 如果 pattern 不是合法的正則表達式，或 attributes 含有 "g"、"i" 和 "m" 之外的字元，拋出該異常。

TypeError - 如果 pattern 是 RegExp 對象，但沒有省略 attributes 參數，拋出該異常。

Location 對象

Location 對象

Location 對象包含有關當前 URL 的信息。

Location 對象是 window 對象的一部分，可通過 window.Location 屬性對其進行訪問。

註意： 沒有應用於Location對象的公開標準，不過所有瀏覽器都支持該對象。

Location 對象屬性

Location 對象方法