1. 程式人生 > >URL地址中的#符號

URL地址中的#符號

一般我們想讓一個a標籤點選後執行javascript程式碼,有以下幾種寫法:
方式一:<a href="#" onclick="alert(1);">點選一</a>
這種方式的缺點就是點選後會在位址列的URL後面加#號,同時把頁面移動到頂部,如下圖所示:


方式二:<a href="javascript:void(0);" onclick="alert(1);">點選一</a>
這種方式避免了方式一的缺點,點選後對頁面沒有任何影響。但是有一個致命的缺點,就是在IE6下不能執行form物件的submit()方法,也不能執行跳轉語句,比如
<a href="javascript:void(0);" onclick="document.forms[0].submit();">點選一</a>
<a href="javascript:void(0);"  onclick="window.location.href='http://www.google.com';">點選一</a>
在IE6下就無效,換成href=”#”就能在IE6下正常執行。

方式三

:<a href="###" onclick="alert(1);">點選一</a>
點選後雖然會在位址列的URL後面加三個#號,但是不會影響滾動條,同時在IE6下也能執行form物件的submit()方法與跳轉語句,算是一個比較折中的方法。

方式四:<a href="javascript:alert(1);">點選一</a>
點選後不會影響滾動條,也不會在位址列的URL後面加三個#號,同時在IE6下也能執行form物件的submit()方法與跳轉語句;但是這樣寫最大的缺點是,JS方法都在

滑鼠點選事件之中,寫法不靈活,無法使用其它事件,限制了使用範圍,也不方便動態對標籤繫結事件。

結論:我個人認為如果執行的javascript方法中需要提交表單、跳轉頁面,則用方式三,其它情況都用方式二。

:這又附帶引出另一個問題,一般重新載入當前頁面用如下的javascript程式碼:
window.location.href = window.location.href;
但是當URL地址中含有#時,上述程式碼無效,於是需要用如下程式碼:
window.location.href = window.location.href.split('#')[0];
將URL地址以#符號分割開,取第一部分即可。

一、#的涵義

#代表網頁中的一個位置。其右面的字元,就是該位置的識別符號。比如,

  http://www.example.com/index.html#print

就代表網頁index.html的print位置。瀏覽器讀取這個URL後,會自動將print位置滾動至可視區域。

為網頁位置指定識別符號,有兩個方法。一是使用錨點,比如<a name="print"></a>,二是使用id屬性,比如<div id="print" >。

二、HTTP請求不包括#

#是用來指導瀏覽器動作的,對伺服器端完全無用。所以,HTTP請求中不包括#。

比如,訪問下面的網址,

  http://www.example.com/index.html#print

瀏覽器實際發出的請求是這樣的:

  GET /index.html HTTP/1.1

  Host: www.example.com

可以看到,只是請求index.html,根本沒有"#print"的部分。

三、#後的字元

在第一個#後面出現的任何字元,都會被瀏覽器解讀為位置識別符號。這意味著,這些字元都不會被髮送到伺服器端。

比如,下面URL的原意是指定一個顏色值:

  http://www.example.com/?color=#fff

但是,瀏覽器實際發出的請求是:

  GET /?color= HTTP/1.1

  Host: www.example.com

可以看到,"#fff"被省略了。只有將#轉碼為%23,瀏覽器才會將其作為實義字元處理。也就是說,上面的網址應該被寫成:

  http://example.com/?color=%23fff

四、改變#不觸發網頁過載

單單改變#後的部分,瀏覽器只會滾動到相應位置,不會重新載入網頁。

比如,從

  http://www.example.com/index.html#location1

改成

  http://www.example.com/index.html#location2

瀏覽器不會重新向伺服器請求index.html。

五、改變#會改變瀏覽器的訪問歷史

每一次改變#後的部分,都會在瀏覽器的訪問歷史中增加一個記錄,使用"後退"按鈕,就可以回到上一個位置。

這對於ajax應用程式特別有用,可以用不同的#值,表示不同的訪問狀態,然後向用戶給出可以訪問某個狀態的連結。

值得注意的是,上述規則對IE 6和IE 7不成立,它們不會因為#的改變而增加歷史記錄。

六、window.location.hash讀取#值

window.location.hash這個屬性可讀可寫。讀取時,可以用來判斷網頁狀態是否改變;寫入時,則會在不過載網頁的前提下,創造一條訪問歷史記錄。

七、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的變化。

八、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內容。


相關推薦

url地址有特殊符號“引號”引發的錯誤

一、問題描述 微信網頁授權時,在本地測試已經通過,預釋出後,出現死迴圈跳轉,get獲取的state引數為空 二、問題解決 訪問路徑 q1.pincn.com:82/inditexcareers/wxauth?state=1&requestu

URL地址的#符號

一般我們想讓一個a標籤點選後執行javascript程式碼,有以下幾種寫法:方式一:<a href="#" onclick="alert(1);">點選一</a> 這種方式的缺點就是點選後會在位址列的URL後面加#號,同時把頁面移動到頂部,如下圖所

ipv6地址URL的表達方式,如何在URL地址包含ipv6地址

清晰 十進制數 reserve 摘要 serve 定位 並且 格式 廣泛 摘要 本文檔定義了在WWW瀏覽器的URL中執行的文本IPv6地址的格式。在包括Microsoft的IE,Mozilla和Lynx等幾個已經被廣泛安裝使用的瀏覽器的IPv6版本中,這種格式已經被使用。並

js獲取url地址的每一個引數,方便操作url的hash

js獲取url地址中的每一個引數,方便操作url的hash 值得收藏 <html> <body> <script> //location.search; //可獲取瀏覽器當前訪問的url中"?"符後的字串

解決URL地址的中文亂碼問題的辦法

解決URL地址中的中文亂碼問題的辦法 引言: 在Restful類的服務設計中,經常會碰到需要在URL地址中使用中文作為的引數的情況,這種情況下,一般都需要正確的設定和編碼中文字元資訊。亂碼問題就此產生了,該如何解決呢?且聽本文詳細道來。 1.  問題的引出   

如何獲取url地址“?”後面的引數

<!DOCTYPE HTML> <html> <head> <title>js獲取url後面的引數</title> <meta charset="utf-8" /> <script>   va

js匹配url地址引數 支援中文

function GetQueryString(name) //匹配引數 支援中文 { var reg = new RegExp("(^|&)"+ name +"=([^&]*)(&|$)"); var r

關於在瀏覽器輸入URl地址含有中文的解決(亂碼)

    亂碼解決: 前端時間在做專案的時候發現在位址列裡輸入Url中有中文會有亂碼,綜合分析了幾個問題,1、首先確定使用的tomcat的編碼是否改動過tomcat中的編碼,或者程式碼中的編碼方式是否轉換錯誤(跟實際的是否一致)2、資料庫的編碼是否跟自己設定的編碼方式一樣,

url地址傳遞陣列引數的方法

陣列引數通過post請求傳送很簡單,get請求則需要一些特殊的寫法,例如要傳遞的陣列引數的引數名為links,則在url地址中傳參時可按如下方式進行傳遞: http://localhost:8080/

url 地址的+(加號)問題

在做模擬 url 請求時,會遇到引數中存在 + 號的情況, 直接傳送的話,在進行地址解析時,會把 + 號轉換為 空格, 直接導致引數不能正確傳輸,經過各種搜尋,終於得到一個解決方案: 將所有的 + 號 手動轉換為 %2B 即可正常傳輸, 這其中的原理還沒弄明

URL地址的中文亂碼問題的解決

引言: 在Restful類的服務設計中,經常會碰到需要在URL地址中使用中文作為的引數的情況,這種情況下,一般都需要正確的設定和編碼中文字元資訊。亂碼問題就此產生了,該如何解決呢?且聽本文詳細道來。 1.  問題的引出    在Restful的服務設計中,查詢某些資訊的時候

爬蟲遇到url地址文字轉碼問題

當url地址含有中文,或者引數有中文的時候,把這樣的url作為引數傳遞的時候,需要把一些中文甚至'/'做一下編碼轉換。 所以對於一些中文或者字元,url不識別,就需要我們進行轉換。 一、urlencode urllib庫裡有一個urlencode函式,它可以把key

用JS解決url地址參數亂碼的問題

url dex var match document type char mat value var url = window.location.herf;//獲取url地址 var obj = {}; //最後輸出的對象 var reg = /\?/;

轉載:web工程URL地址的推薦寫法

pos 綜合 div tco imp style public tps 目錄 在JavaWeb開發中,只要是寫URL地址,那麽建議最好以"/"開頭,也就是使用絕對路徑的方式,那麽這個"/"到底代表什麽呢?可以用如下的方式來記憶"/":如果"/"是給服務器用的,則代表當前的w

如何在url地址直接寫數組參數進行傳遞

今天 依然 php tar highlight blog 數組 重復 結果 今天博主遇到這樣一個問題,就是如何在瀏覽器url地址欄中直接寫入數組參數進行傳遞,問了身邊幾個同事,都沒有找到成功的書寫方法。就開始懷疑是否可以在地址欄中直接寫入數組進行傳遞。

SVN如何將版本庫url訪問地址的https改為http

ima svn 面板 連接 協議 版本 nbsp .com 控制臺 1、選擇控制臺樹中的根節點,右鍵選擇“屬性”。 2、切換至面板“網絡”。 3、取消勾選項“使用安全連接協議(https://)”。 SVN如何將版本庫url訪問地址中的https改為http

在i.jsp url地址欄輸入一個參數,值是整型,要求倒著輸出

lang 輸出 spa span url request parameter out getpara <% String k = request.getParameter("k"); int tt = Integer.parseInt(k); out.println(

從CSV檔案讀取jpg圖片的URL地址並多執行緒批量下載

很多時候,我們的網站上傳圖片時並沒有根據內容進行資料夾分類,甚至會直接儲存到阿里雲的OSS或是七牛雲等雲端儲存上。這樣,當我們需要打包圖片時,就需要從資料庫找尋分類圖片,通過CURL進行下載。我最近剛剛完成了一個這樣的任務,覺得會比較常用,就把程式放到了github上分享給大家,希望大家能夠喜歡。 do

javascript常見的函式封裝 :判斷是否是手機,判斷是否是微信,獲取url地址?後面的具體引數值,毫秒格式化時間,手機端px、rem尺寸轉換等

// 判斷是否是手機 function plat_is_mobile(){   var sUserAgent = navigator.userAgent.toLowerCase();   var bIsIpad = sUserAgent.match(/ipad/i) == "ipad";   var

PHP提取字串視訊url地址函式,可直接使用

PHP程式提取字串中的視訊url地址,可直接使用,使用方法: get_content_video($contents); /** * PHP提取字串中視訊url地址 * @ Linyufan.com * @ 2018.9.11 */ function get_co