jQuery 예제와 함께 해시 URL 사용-JS 튜토리얼-php.cn

jQuery 예제와 함께 해시 URL 사용

Christopher Nolan

풀어 주다： 2025-02-24 11:09:14

원래의

366명이 탐색했습니다.

Using Hash Urls with jQuery Example

jQuery 예제와 함께 해시 URL 사용 요즘 많은 현대 웹 앱이 해시 URL을 사용합니다 새로 고침하지 않고 페이지에 고유성 (페이지 태그, 섹션, 액션 등)을 추가하려면 Youn을 식별 할 수 있습니다. URL을 통해 동적 데이터를 페이지로 전달하기 위해 jQuery를 사용하여 URL 매개 변수를 얻는 것이 계속됩니다. 여전히 www에서 널리 사용됩니다. window.location.hash vs document.url 해시 태그를 잡는 데 사용할 수있는 동정인과 아래를 간단히 살펴 보겠습니다.

중요 : Location.hash는 IE에 안전하지 않습니다 (IE9 포함). 또한 페이지에 iframe이 포함 된 경우 수동으로 새로 고침 후 iframe 컨텐츠가 이전 위치를 가져옵니다 (첫 번째 페이지로드의 경우) 수동 검색 값은 위치와 다르므로 Hash를 통해 검색하는 것이 가장 좋습니다.

따라서 주간 해시 태그 값을 추출하는 예로 다음과 같이 할 것입니다.

<span>//using window.location.hash
</span>$<span>.fn.urlHash = function()
</span><span>{
</span>  <span>return window.location.hash.replace('#','');
</span><span>};
</span>$<span>.urlHash();</span>

로그인 후 복사

또 다른 괜찮은 길 이것은 더 무거운 정규식을 사용하는 또 다른 괜찮은 방법입니다 (파운드 부호는 선택 사항입니다.

<span>//IE Proof - URL Hash Grab - returns complete hash value
</span>$<span>.fn.urlHash = function()
</span><span>{
</span>  <span>return document.URL.substr(document.URL.indexOf('#')+1);
</span><span>};
</span>$<span>.urlHash();</span>

로그인 후 복사

실패…

<span>//in context - extract dayofweek hash
</span><span>//eg  url#dayofweek1 would return 1
</span><span>if (document.URL.indexOf('#dayofweek'))
</span><span>{
</span>    week <span>= parseInt(document.URL.substr(document.URL.indexOf('#')+1).replace('dayofweek',''))-1;
</span>    $resParent<span>.eq(week).showResources();
</span><span>}</span>

로그인 후 복사

문제 : 해시에 비 라틴 또는 비 alphanumeric 특성이있을 때 잘못된 결과를 반환합니다. 예를 들어, 해시 #foo@o #bar $%huh 안녕하세요. location.shash가 비어있을 때 타입 테러를 던지십시오.

동일한 테스트 해시를 사용하면 최소한 "foo@o"부분을 얻을 수 있습니다. 즉, 해시에 파운드 부호가 포함되어있을 때만 실패합니다. 해시가 없으면 빈 문자열 대신 정의되지 않은 반환을 반환하지만 오류가 발생하지 않습니다.

<span>var match = location.hash.match(<span>/<span>^#?(.*)$</span>/</span>)[1];
</span><span>if (match)
</span><span>{
</span>   <span>//do stuff...
</span><span>}</span>

로그인 후 복사

참조 자료 해시를 얻으십시오 - 방탄 방법 해시 URL에 대한 자주 묻는 질문 (FAQ) 해시 URL이란 무엇이며 중요한 이유는 무엇입니까?

해시 URL은 해시 (#) 기호와 식별자가 포함 된 URL입니다. 이 식별자는 웹 페이지 내의 특정 섹션을 가리키는 데 사용됩니다. 해시 URL은 사용자가 전체 페이지를 스크롤하지 않고도 페이지의 특정 컨텐츠로 직접 탐색 할 수 있기 때문에 중요합니다. 이것은 여러 섹션이있는 긴 웹 페이지에 특히 유용합니다. 또한 해시 URL은 단일 페이지 웹 애플리케이션에서 상태를 유지하는 데 사용될 수 있습니다. 여기서 해시는 현재보기를 반영하도록 변경합니다.

<span>var hash = location.hash.match(<span>/#<span>(w+)</span>/</span>)[1];</span>

로그인 후 복사

해시 URL을 어떻게 만들 수 있습니까?

<span>var hash = location.hash.split('#')[1];</span>

로그인 후 복사

해시 생성 URL은 매우 간단합니다. 해시 (#) 기호를 추가하고 URL에 식별자가 추가되기 만하면됩니다. 예를 들어, www.example.com에 페이지가 있고 'Section1'이라는 섹션을 가리키는 해시 URL을 만들려면 해시 URL이 www.example.com#section1. jQuery를 사용하여 해시 URL을 조작하는 방법?

jQuery는 해시 URL을 조작하는 몇 가지 방법을 제공합니다. '위치'객체의 '해시'속성을 사용하여 URL의 해시 부분을 얻거나 설정할 수 있습니다. 예를 들어 해시를 '섹션 1'으로 설정하려면 location.hash = 'section1';. 현재 해시를 얻으려면 var hash = location.hash;. 해시를 변경하면 페이지를 새로 고치지 않고 다른 콘텐츠를로드 할 수 있습니다. 이것은 단일 페이지 응용 프로그램에서 종종 원활한 사용자 경험을 만들기 위해 사용됩니다.

jQuery로 해시 변경을 감지하려면 어떻게해야합니까?

jQuery 변화. 해시가 변경 될 때 마다이 이벤트를 사용하여 코드를 실행할 수 있습니다. 예를 들어, $ (window) .on ( 'hashchange', function () { / * 코드가 여기 * /});. 해시 URL은 매우 유용 할 수 있지만 몇 가지 단점이 있습니다. 한 가지 주요 단점은 검색 엔진이 해시와 관련된 컨텐츠를 색인하지 않을 수 있으므로 검색 엔진 최적화 (SE) 문제를 일으킬 수 있다는 것입니다. 또한 해시 URL은 항상 별도의 페이지보기로 추적되는 것은 아니기 때문에 분석에 문제를 일으킬 수 있습니다.

앵커 태그와 함께 해시 URL을 사용할 수 있습니까?

예, 해시 URL은 종종 사용됩니다. 앵커 태그는 사용자가 페이지의 특정 섹션으로 직접 탐색 할 수있는 '점프 링크'를 생성합니다. URL의 해시는 앵커 태그의 'ID'속성에 해당합니다.

jQuery가있는 URL에서 해시를 제거 할 수 있습니까?

는 URL에서 해시를 제거 할 수 있습니다. '위치'객체의 '해시'속성을 빈 문자열로 설정합니다. 예를 들어, location.hash = '';. 이것은 종종 응용 프로그램 상태가 해시에 저장되는 단일 페이지 응용 프로그램에 사용됩니다. 이를 통해 사용자는 뒤로 버튼을 사용하거나 URL을 북마크하여 동일한 상태로 다시 탐색 할 수 있습니다.

깊은 링크에 해시 URL을 사용하는 방법?

딥 링크는 연습입니다. URL을 사용하여 한 페이지 내의 특정 컨텐츠로 직접 탐색합니다. 해시 URL은 페이지의 특정 섹션에 직접 연결할 수 있으므로 이에 완벽합니다. 딥 링크를 위해 해시 URL을 사용하려면 섹션의 해시와 식별자를 URL에 추가하십시오.

위 내용은 jQuery 예제와 함께 해시 URL 사용의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!