URL中的#

時間 2019-11-17

標籤 url 欄目 HTTP/TCP 简体版

原文原文鏈接

1. 包含`#`的url是什麼？

包含#符號的url就是一個 Fragment URL。#指定了網頁中的一個位置。 javascript

瀏覽器就會查詢網頁中 name屬性值匹配 print的 <a>標籤。即： <a name="print"></a> ，
或者是 id 屬性匹配 print 的 <a> 標籤。即 <a id="print"></a>
匹配後，瀏覽器會將該部分滾動到可視區域的頂部。

2. Http請求不包括`#`

#僅僅做用於瀏覽器，它不會影響服務器端。因此http請求中不會包括#。
訪問下面的網址html

http://www.example.com/index.html#print
複製代碼

瀏覽器實際發出的請求java

GET /index.html HTTP/1.1
    Host: www.example.com
複製代碼

3. `#`後面的全部字符，都會被瀏覽器當作位置標誌符。

表單提交時，若是提交字符中帶有#字符,後面的參數就會被截斷了。ajax

4. 修改`#`不會致使頁面從新加載，可是會改變瀏覽器的歷史記錄

location.href += '#caper';  //頁面不會刷新
複製代碼

瀏覽器滾動到新的位置，可是並無reload整個頁面。json

可是，它改變了瀏覽器記錄，咱們能夠經過瀏覽器上一頁按鈕回到原始的位置。
這個功能對單頁面應用很是的有用。瀏覽器

5. javascript 能夠經過 `window.location.hash`來讀取或改變 `#`

6. 谷歌的網絡蜘蛛默認會忽略＃後面的內容

谷歌網絡蜘蛛負責爬取網頁的內容，以及網頁裏面的連接，它們會成爲google搜索索引的一部分。網絡蜘蛛會抓取並分析HTML，但因爲它並非瀏覽器程序，也沒有javascript引擎，頁面上用來加載顯示內容的javascript並不會被執行。所以，＃後面的字符會被網絡蜘蛛忽視，只抓取＃前面的內容，舉例：bash

http://www.cnblogs.com/#casper
http://www.cnblogs.com/#chyingp
複製代碼

這點不管對於開發者，仍是搜索引擎都是不利的，前者辛苦創做的內容(應用)少了不少被訪問的機會，然後者則失去了進一步豐富其內容索引的機會，特別是在ajax應用愈來愈多的今天。服務器

解決方案 hash bang網絡

只要將＃改爲#!便可，實現大體爲：當網絡蜘蛛遇到#!時候，會自動將#!identifier轉成_escaped_fragment_=identifier形式的參數。可是：ide

將#改爲!#告訴網絡蜘蛛：咱們支持這個解決方案：hash bang
相應的，咱們的應用也須要具有相應的支持能力，對於網絡蜘蛛帶escaped_fragment=casper的GET請求，須要可以提供相應的網頁內容

7. onhashchange 事件

這是一個HTML 5新增的事件，當#值發生變化時，就會觸發這個事件。IE8+、Firefox 3.6+、Chrome 5+、Safari 4.0+支持該事件。

它的使用方法有三種：

window.onhashchange = func;

<body onhashchange="func();">

window.addEventListener("hashchange", func, false);
複製代碼

參考文檔

6 Things You Should Know About Fragment URLs

URL的井號

相關標籤/搜索

每日一句

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

URL中的#

1. 包含#的url是什麼？

2. Http請求不包括#

3. #後面的全部字符，都會被瀏覽器當作位置標誌符。

4. 修改#不會致使頁面從新加載，可是會改變瀏覽器的歷史記錄

5. javascript 能夠經過 window.location.hash來讀取或改變 #