sourcecode

javascript로 URL에 해시태그 첨부

copyscript 2023. 4. 4. 21:57
반응형

javascript로 URL에 해시태그 첨부

SEO를 희생시키지 않고 아약스 사이트를 구축하고 싶다.질문: 페이지에 다음과 같은 링크가 있는 경우:

   <a href="http://example.com/cats" id="cats">Cats</a>
   <a href="http://example.com/dogs" id="dogs">Dogs</a>

각 링크를 클릭하면 대응하는 해시태그로 주소 표시줄을 업데이트하고 싶습니다.따라서 "Cats" 링크를 클릭하면 현재 위치는 http://example.com/ #cats가 되며, 이를 사용하여 내 Ajax 콘텐츠를 표시할 수 있습니다.javascript가 꺼져 있거나 사용자가 검색 엔진일 경우 /cats로 직접 이동합니다.

를 변경할 수 있습니다.location.hash속성을 지정하면 페이지에서 이동하지 않고 현재 앵커 식별자를 변경할 수 있습니다. 예를 들어 다음과 같습니다.

<a href="http://mysite.com/cats" id="cats" class="ajaxLink">Cats</a>
<a href="http://mysite.com/dogs" id="dogs" class="ajaxLink">Dogs</a>

그 후, 다음과 같이 입력합니다.

$('.ajaxLink').click(function (e) {
  location.hash = this.id; // get the clicked link id
  e.preventDefault(); // cancel navigation

  // get content with Ajax...
});​

Google은 해시에 느낌표가 있는 경우 해시를 인덱싱합니다.#!dogs

다음으로 AJAX 지향이라고 가정합니다.

window.location은 설정할 수 없습니다.보안상의 이유로 페이지를 javascript로 새로고침하지 않고 href를 실행합니다.

제가 본 바로는 구글이 #url을 색인화 할 것이라고 말하는 사람도 있지만, 그것들은 별도의 페이지로 간주되지 않을 것이며, 저는 당신이 원하는 것이 아니라고 생각합니다.저도 SEO에 대한 경험이 거의 없습니다.

단순성이 가장 좋지만 이 프로세스를 자동화하거나 범용화하고 싶다면 이 lite 플러그인 jquery.hashTag.js를 사용할 수 있습니다.

$('a').hashTag({
    source: function() {
      return $(this).attr('id');
    }
  });

이 스니펫을 $(문서) 안에 넣기만 하면 됩니다.준비가 되어 있습니다!.

나머지 일은 그것만으로 할 수 있다.ID가 해시로 제공된 링크를 자동 클릭하는 것과 같습니다.

Ben Mills, 아무도 위치를 언급하지 않았다.href, 위치에 관한 거야페이지 새로고침이 필요 없는 해시.

언급URL : https://stackoverflow.com/questions/2366481/attaching-hashtag-to-url-with-javascript

반응형