window.location.hash解析

location對象:設置或獲取當前URL的信息javascript

使用location對象能夠設置或返回URL中的一些信息,一個完整的URL地址的格式爲:html

協議://主機:端口/路徑名稱#hash標識?搜索條件java

其 中,協議是URL的起始部分,用於指定該URL地 址所採用的通訊協議,好比http、ftp等;主機是指該URL所對應的服務器的名稱;端口用於指定服務器用於通訊的端口號,與主機名之間使用冒號隔開; 路徑名稱是指該URL所對應的網頁文件在服務器上的虛擬路徑;若是頁面中含有錨點鏈接,能夠使用hash標誌指定頁面中的錨點標誌,該標誌以「#」開頭; 搜索條件是指URL中所含有的查詢條件,該查詢條件以「?」開頭,以「變量名稱=值」的形式出現,多個查詢條件之間使用鏈接符「&」鏈接。比 如:http://upc.edu.cn:8080/wwwroot/ index.html#topicID?id=3876。服務器

利用location對象能夠方便地設置或獲取URL中的各類信息,本節將詳細介紹location對象的一些經常使用屬性和方法。函數

1.hash屬性htm

【功能說明】設置或獲取URL中的錨點名稱,若是Web頁面中使用的錨點鏈接,經過設置location對象的hash屬性能夠方便的跳轉到頁面中的不一樣部分。對象

【基本語法】location.haship

下面的代碼演示瞭如何在網頁中使用location對象的hash標誌快速定位頁面中的 內容。get

【實例演示】hash

<script>

    function getAnchor(str)

    {

      window.location.hash=str;

    }

</script>

<body>

  //建立錨點連接,快速定位網頁內容

  <a href="javascript:getAnchor('jueju');">杜甫 絕句</a>

  <a href="javascript:getAnchor('yijianmei');">李清照 一剪梅</a>

  <a href="javascript:getAnchor('hanghelou');">崔顥 黃鶴樓</a>

  //下面定義了3個錨點

  <a name="jueju"><center>絕句</center>

  <!--古詩內容省略,見源代碼-->

  </a><br><br><br><br><br>

  <a name="yijianmei"><center>一剪梅</center>

  <!--古詩內容省略,見源代碼-->

  </a><br><br><br><br><br>

  <a name="hanghelou"><center>黃鶴樓</center>

  <!--古詩內容省略,見源代碼--> 

  </a>

</body>

這段代碼在一個網頁文件中建立了3個錨點連接, 單擊其中任一個連接,程序就會調用getAnchor函數來設置location對象的hash屬性爲相應的值,以使頁面滾動到指定的內容上。

相關文章
相關標籤/搜索