AJAX 페이지 load/history.pushState가 웹 사이트를 탐색 한 후 제대로 작동하지 않습니다.

사용자가 링크를 클릭 할 때 XMLHttpRequests를 사용하여 웹 페이지의 일부를 요청하는 웹 사이트가 있습니다.AJAX 페이지 load/history.pushState가 웹 사이트를 탐색 한 후 제대로 작동하지 않습니다.

관련 코드 :

function requestPage(url, push) { 
    var xhr = new XMLHttpRequest(); 
    xhr.onreadystatechange = function() { 
     if (xhr.readyState === 4) { 
      main.innerHTML = xhr.responseText; 
      attachLinkClickHandlers(main); // `main` = container element 

      if (push) 
       window.history.pushState(url, title, url); 
     } 
    }; 

    xhr.open('GET', url); 
    xhr.setRequestHeader('Content-Only', 1); // Server responds to Content-Only header by not sending everything surrounding the main content. 
    xhr.send(); 
} 

window.addEventListener('popstate', function (e) { 
    var page = e.state; 
    requestPage(page, false); 
}); 

window.history.replaceState(location.href, document.title, location.href); 
attachLinkClickHandlers(document);

링크 클릭에 :

requestPage(link.href, true);

예 서버 응답 :

일반 요청 응답 :

<!doctype html> 
<html> 
    <head> 
     ...stuff... 
    </head> 
    <body> 
     ...stuff... 
     <main> 
      <h1>Content</h1> 
      <p>Content Content</p> 
     </main> 
     ...stuff... 
    </body> 
</html>

Content-Only 헤더 세트

응답 : 내가 클릭하면

<h1>Content</h1> <p>Content Content</p>

모든 ... 제외 구성 (페이지 로딩, 사이트 내 뒤로/앞으로 버튼을 탐색 ), 로 작동 외부 링크 (클릭 핸들러가 부착되지 않은 경우 크로스 원점이므로) 브라우저의 뒤로 버튼을 누르면 XHR의 응답 인 인사말을받습니다. 단순히 콘텐츠 인 <html> , <head> 또는 <body> 태그는 CSS 또는 JavaScript를 의미하지 않습니다.

이 경우 어떻게 브라우저에 전체 페이지를로드 할 수 있습니까?

출처

2016-10-18 Hatchet

동일한 URL을 사용하여 두 가지 유형의 콘텐츠를 검색하고 있습니까?

그렇다면 정확히 동일한 문제가있었습니다. 동일한 URL과 다른 요청 헤더를 사용하여 html 응용 프로그램 페이지 또는 일부 JSON 데이터를 반환했습니다. history.pushState 호출 및 탐색을 클릭하면 브라우저에 JSON 응답이 표시됩니다 (브라우저 캐시가 URL과 연결된 마지막 응답이므로).

브라우저는 URL과 응답 만 추적합니다. XHR 요청 헤더를 사용하여 실제로 원하는 유형의 콘텐츠를 지정하는 것은 브라우저가 추적하는 것이 아닙니다. 그래서 당신이 멀리 탐색하고 모든 브라우저를 반환하면 URL (그리고 아마도 캐시 된 응답)입니다.

JSON 데이터를 실제로 가져온 URL을 브라우저 기록을 수정하는 데 사용 된 URL에서 변경하는 것이 수정되었습니다.

// on click of product item 123 
var url = 'http://<webserver>/products/123', 
    title = 'Product 123'; 

history.pushState({ 
     url: url, 
     title: title 
    }, title, url); 

product = $.getJSON(url + '?json=1'); // make the url different

나는이 https://github.com/robbishop/history-api-test

작동 나는 몇 가지 브라우저에서이 시도하고 파이어 폭스 (버전 50.0)이 크롬 다르게 작동합니다 얼마나 강조하기 위해 함께 몇 가지 작은 테스트를했습니다. 예를 들어, 페이지 내용을 수정 한 다음 가짜 URL로 history.pushState를 호출 한 다음 뒤로 이동하면 뒤로 이동하십시오. Chrome에서 404 페이지를 찾을 수 없지만 (URL은 실제가 아닙니다) Firefox에서는 실제로 마지막으로 본대로 페이지를 복원합니다. 브라우저의 차이점도 있지만 브라우저 기록을 직접 조작 할 때 URL을 단일 콘텐츠 유형과 연결하는 것이 더 안전하다고 생각합니다.

출처

2016-11-26 10:36:07

이상한 현상이 ... 감사합니다! – Hatchet

AJAX 페이지 load/history.pushState가 웹 사이트를 탐색 한 후 제대로 작동하지 않습니다.

답변

관련 문제