Hemen Teklif Al
  • Adres : 1. Cadde 1393 Sokak
    No : 7/A Balgat / ANKARA
  • Telefon
    0312 285 72 59
  • E-Posta
    info@basakevyemekleri.com

history.pushstate 예제

이 기술을 더 큰 규모로 사용한다면 그 목적을 위해 특별히 설계된 도구를 사용하는 것이 좋습니다. 예를 들어 pjax는 기록 API를 사용하는 브라우저만 지원하지만 Ajax 및 pushState를 동시에 사용하는 프로세스를 가속화하는 jQuery 플러그인입니다. jQuery를 사용하여 이러한 방식으로 콘텐츠를 로드하는 것은 매우 지저분하고 우리는 아마 우리의 pushState 메서드에 더 복잡한 개체를 전달하고 싶지만 우리가 즉시 사용하는 방법을 학습을 시작할 수있는 방법을 보여줍니다 때문에 위의 예제는 단순하다는 것을 인정하는 것이 중요합니다 히스토리 API를 참조하십시오. 먼저 우리는 걷고, 우리는 달렸다. 이 예제에서는 기록, 주소 표시줄 및 페이지 제목에 새 레코드를 삽입합니다. pushStateState() 메서드는 상태, 제목 및 URL인 3개의 매개 변수를 사용합니다. 마지막 매개 변수는 우리가 관심 있는 매개 변수이며 브라우저에 새 업데이트된 URL이 무엇인지 알려줍니다. 이 예제에서는 URL만 지정했지만 MDN의 pushState() 메서드에 대해 자세히 볼 수 있습니다. 다음은 예제입니다. 사이트의 홈페이지에서 도움말 페이지로 이동하는 사람이 있다고 가정해 보겠습니다. Ajax와 함께 해당 도움말 페이지의 콘텐츠를 로드하고 있습니다.

그런 다음 해당 사용자는 제품 페이지로 이동하여 Ajax로 콘텐츠를 다시 로드하고 교체합니다. 그런 다음 URL을 공유하려고 합니다. History API를 사용하면 사용자가 탐색할 때 페이지의 URL을 사용자가 탐색할 때 바로 변경하여 표시되는 URL(따라서 공유 또는 저장)이 관련성이 있고 정확할 수 있습니다. 페이지가 로드되면 null이 아닌 상태 개체가 있을 수 있습니다. 예를 들어 페이지가 푸시스테이트(pushState() 또는 replaceState()를 사용하여 상태 개체를 설정한 다음 사용자가 브라우저를 다시 시작하는 경우 이러한 일이 발생할 수 있습니다. 페이지가 다시 로드되면 페이지는 온로드 이벤트를 수신하지만 팝스테이트 이벤트는 수신되지 않습니다. 그러나 history.state 속성을 읽으면 팝스테이트가 발사된 경우 얻은 상태 개체를 다시 가져옵니다. 이 예제의 태그는 충분히 간단합니다: 일부 링크가 포함된 .gallery가 있고 각 링크 에는 이미지가 있습니다. 그런 다음 선택한 이름과 각 문자의 각 HTML 파일의 데이터로 대체하려는 빈 .content div로 업데이트하려는 텍스트가 있습니다.

그리고 거기에 우리는 그것을 가지고! HTML5 기록 API를 사용하는 완전한 기능의 페이지! 여기에서 전체 예제를 살펴보십시오. 즉, 우리가 구현 할 수있는 해킹이나 성능 향상 트릭에 관계없이 웹 개발자는 URL을 소중히해야하며 HTML5 History API의 도움으로 위의 예와 같은 문제를 약간의 팔꿈치 그리스로 해결할 수 있습니다. 이 if 문 안에 우리는 다음 우리가 선택한 이미지의 데이터 이름 특성을 데이터 변수에 할당할 수 있습니다. 그런 다음 “.html”을 더하고 세 번째 매개 변수인 pushState 메서드에서 로드하려는 URL을 사용합니다(실제 예제에서는 Ajax 요청이 성공한 후에만 URL을 변경하고 싶습니다) 단일 페이지에서 데이터를 로드합니다. 이전 데이터를 새 데이터로 바대체할 수 있습니다. 그러나 우리는 예를 들어 우리가 about.php, contact.php, blog.php 등과 같은 페이지가있는 경우 다른 페이지를 얻을 수있는 방법 …….. 이 메서드를 사용 하려면 기록 항목을 추가할 수 있습니다. 자세한 내용은 이 문서를 살펴보십시오: pushState() 메서드 이러한 기록 API의 가장 중요한 점은 페이지를 다시 로드하지 않는다는 것입니다.

과거에는 URL을 변경하는 유일한 방법은 항상 페이지를 다시 로드한 window.location을 변경하는 것이었습니다. 변경한 것이 해시(예: link 를 클릭하는 방법과 같이 페이지를 다시 로드하지 않는 경우). 마찬가지로, 다음과 같이 (사용자가 앞으로 단추를 클릭 한 것처럼) 앞으로 나아갈 수 있습니다: URL에 대해 생각하는 것을 https://blog.twitter.com/2012/implementing-pushstate-for-twittercom, 특히 Kyle의 URL 디자인에서이 게시물을 참조하십시오. 항상 Neath: HTML5 역사 API는 개발자가 전체 페이지를 새로 고치지 않고 웹 사이트의 URL을 수정할 수 있는 기능을 제공합니다.