-
지난해 9월 트위터는 버전을 개편했다. 중요한 변화는 URL에 "#!" 기호가 추가되었다는 것입니다. 예를 들어 개정 전 사용자 홈페이지 URL은 다음과 같습니다.
개정 후 이렇게 되었습니다.
주류 웹사이트에서 중요한 URL에 '#'을 대규모로 사용한 것은 이번이 처음이다. 이는 해시 기호의 역할이 다시 인식되고 있음을 보여줍니다. 이 글은 HttpWatch의 글을 바탕으로 파운드 기호와 관련된 중요한 지식 포인트를 모두 정리한 것입니다.
1. #의 의미
#웹페이지에서의 위치를 나타냅니다. 오른쪽의 문자는 위치의 식별자입니다. 예를 들어,
http://www.example.com/index.html#PRint
웹 페이지 index.html의 인쇄 위치를 나타냅니다. 브라우저가 이 URL을 읽은 후 자동으로 인쇄 위치를 표시 영역으로 스크롤합니다. 웹페이지 위치에 대한 식별자를 지정하는 방법에는 두 가지가 있습니다. 하나는 <a name="print"></a>와 같은 앵커 포인트를 사용하는 것이고, 다른 하나는 <div id="print" >와 같은 id 속성을 사용하는 것입니다.
2. HTTP 요청에는 #이 포함되지 않습니다.
#은 브라우저 작업을 안내하는 데 사용되며 서버 측에서는 전혀 쓸모가 없습니다. 따라서 #은 HTTP 요청에 포함되지 않습니다.
예를 들어, 다음 URL을 방문하십시오.
http://www.example.com/index.html#print
브라우저의 실제 요청은 다음과 같습니다.
GET /index.html HTTP/1.1
호스트: www.example.com
보시다시피 index.html만 요청되고 "#print" 부분은 전혀 없습니다.
3. # 뒤의 문자
첫 번째 # 뒤에 나타나는 모든 문자는 브라우저에서 위치 식별자로 해석됩니다. 이는 이러한 문자가 서버로 전송되지 않음을 의미합니다.
예를 들어 다음 URL은 색상 값을 지정하기 위한 것입니다.
http://www.example.com/?color=#fff
그러나 브라우저의 실제 요청은 다음과 같습니다.
GET /?color= HTTP/1.1
호스트: www.example.com
보시다시피 "#fff"는 생략되어 있습니다. #이 %23으로 트랜스코딩되는 경우에만 브라우저는 이를 리터럴 문자로 처리합니다. 즉, 위의 URL은 다음과 같이 작성되어야 합니다.
http://example.com/?color=%23fff
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 속성은 읽고 쓸 수 있습니다. 읽을 때는 웹페이지의 상태가 변경되었는지 확인하는 데 사용할 수 있으며, 쓸 때는 웹페이지를 다시 로드하지 않고도 접속 기록이 생성됩니다.
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이 다음과 같다는 것을 발견했습니다.
다른 URL이 자동으로 크롤링됩니다.
http://twitter.com/?_escaped_fragment_=/사용자 이름
이 메커니즘을 통해 Google은 동적 Ajax 콘텐츠의 색인을 생성할 수 있습니다.
기사 출처: Ruan Yifeng의 온라인 일기