如何獲取url#號後的參數

時間 2019-11-11

標籤如何獲取 url 參數欄目 HTTP/TCP 简体版

原文原文鏈接

昨天遇到這個問題：在A頁面中經過location.href跳轉到另外一個B頁面，此跳轉地址是http://www.xyz.com/aa.html#bb.html?param=xxx  如今要怎麼在B頁面中取到param的值？如今的狀況是跳到B頁面後地址欄顯示的就是http://www.xyz.com/aa.html#bb.html 後面的參數部分沒有了，取到的參數值也是空的

搞了很久也沒出來，最後問了大牛才發現個人基本功不行啊 理解就出錯了，#後的內容都不會傳到服務端的，因此到新頁面看到的地址欄中就沒有#後的參數，經大牛指點，把地址改成：

http://www.xyz.com/aa.html?param=xxx#bb.html  就是先加參數，再加#  由於這個頁面是有iframe的，因此其實也是傳參數到aa.html的，並非bb.html

具體細看下下列的各對象說明就明白了

location：子對象
document.location.hash          // #號後的部分
document.location.host          // 域名+端口號
document.location.hostname      // 域名
document.location.href          // 完整URL
document.location.pathname      // 目錄部分
document.location.port          // 端口號
document.location.protocol      // 網絡協議(http:)
document.location.search        // ?號後的部分javascript

而後到跳轉後的頁面處理這個地址就能夠取到參數值了，方法：html

<script type="text/javascript">

//取到上一頁面傳過來的參數
var $ = $ || {}; 
$.getParam = function( key, strURL ){
strURL = strURL || window.location.search;
return new RegExp( "(^|\\?|&)" + key + "=([^&]*)(\\s|&|$)", "i" ).test( strURL ) ?
decodeURIComponent( RegExp.$2.replace( /\+/g, " " ) ) : "";
};
// console.log($.getParam('param')); //第二個參數不傳拿當前window.location 用於普通頁面
// console.log($.getParam('param',top.window.location)); //用於包括有iframe的頁面,獲得的結果是xxx#bbb.html
console.log($.getParam('param',top.window.location.search)); //用於有iframe的頁面，search是指裏面的參數，hash是指#後的內容 獲得的結果是xxx
</script>

再引用一下http://www.cnblogs.com/kaituorensheng/p/3776527.html內容，說明下#java

URL中「#」「？」 &「」號的做用

1. #ajax

10年9月，twitter改版。一個顯著變化，就是URL加入了"#!"符號。好比，改版前的用戶主頁網址爲http://twitter.com/username改版後，就變成了http://twitter.com/#!/username
　　這是主流網站第一次將"#"大規模用於重要URL中。這代表井號（Hash）的做用正在被從新認識。本文根據HttpWatch的文章，整理與井號有關的全部重要知識點。
1、#的涵義
　　#表明網頁中的一個位置。其右面的字符，就是該位置的標識符。好比，http://www.example.com/index.html#print就表明網頁index.html的print位置。瀏覽器讀取這個URL後，會自動將print位置滾動至可視區域。
　　爲網頁位置指定標識符，有兩個方法。一是使用錨點，好比<a name="print"></a>，二是使用id屬性，好比<div id="print">。瀏覽器

2、HTTP請求不包括#
　　#是用來指導瀏覽器動做的，對服務器端徹底無用。因此，HTTP請求中不包括#。
好比，訪問下面的網址，http://www.example.com/index.html#print，瀏覽器實際發出的請求是這樣的：緩存

GET /index.html HTTP/1.1
Host: www.example.com

3、#後的字符
　　在第一個#後面出現的任何字符，都會被瀏覽器解讀爲位置標識符。這意味着，這些字符都不會被髮送到服務器端。
好比，下面URL的原意是指定一個顏色值：http://www.example.com/?color=#fff，可是，瀏覽器實際發出的請求是：服務器

GET /?color= HTTP/1.1
Host: www.example.com

4、改變#不觸發網頁重載
　　單單改變#後的部分，瀏覽器只會滾動到相應位置，不會從新加載網頁。
好比，從http://www.example.com/index.html#location1改爲http://www.example.com/index.html#location2，瀏覽器不會從新向服務器請求index.html。網絡

5、改變#會改變瀏覽器的訪問歷史
　　每一次改變#後的部分，都會在瀏覽器的訪問歷史中增長一個記錄，使用"後退"按鈕，就能夠回到上一個位置。這對於ajax應用程序特別有用，能夠用不一樣的#值，表示不一樣的訪問狀態，而後向用戶給出能夠訪問某個狀態的連接。值得注意的是，上述規則對IE 6和IE 7不成立，它們不會由於#的改變而增長曆史記錄。
　　異步

6、window.location.hash讀取#值
　　window.location.hash這個屬性可讀可寫。讀取時，能夠用來判斷網頁狀態是否改變；寫入時，則會在不重載網頁的前提下，創造一條訪問歷史記錄。
　　post

7、onhashchange事件
　　這是一個HTML 5新增的事件，當#值發生變化時，就會觸發這個事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持該事件。
　　它的使用方法有三種：

window.onhashchange = func;
<body onhashchange="func();">
window.addEventListener("hashchange"， func, false);

　　對於不支持onhashchange的瀏覽器，能夠用setInterval監控location.hash的變化。

8、Google抓取#的機制
　　默認狀況下，Google的網絡蜘蛛忽視URL的#部分。
　　可是，Google還規定，若是你但願Ajax生成的內容被瀏覽引擎讀取，那麼URL中可使用"#!"，Google會自動將其後面的內容轉成查詢字符串_escaped_fragment_的值。
　　好比，Google發現新版twitter的URL：http://twitter.com/#!/username
　　就會自動抓取另外一個URL：http://twitter.com/?_escaped_fragment_=/username
　　經過這種機制，Google就能夠索引動態的Ajax內容。

注

AJAX = 異步 JavaScript和XML（標準通用標記語言的子集）。AJAX 是一種用於建立快速動態網頁的技術。

2. ？

1）鏈接做用：好比

http://www.xxx.com/Show.asp?id=77&nameid=2905210001&page=1

2）清除緩存：好比

http://www.xxxxx.com/index.html 
http://www.xxxxx.com/index.html?test123123

兩個url打開的頁面同樣，可是後面這個有問號，說明不調用緩存的內容，而認爲是一個新地址，從新讀取。

3. &

不一樣參數的間隔符

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

如何獲取url#號後的參數

URL中「#」 「？」 &「」號的做用

URL中「#」「？」 &「」號的做用