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下正常執行。
方式三
點選後雖然會在位址列的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