AJAX 웹 페이지는 브라우저 앞으로 및 뒤로 기능_javascript 기술을 유지합니다.

AJAX가 많이 사용되는 일부 페이지에서는 새로 고침 후 원본 페이지와 매우 다른 페이지를 볼 수 있기 때문에 감히 새로 고침을 하지 않는 경우가 있습니다. 특정 페이지의 콘텐츠가 많이 업데이트될 때 AJAX를 사용할지 여부에 대한 문제는 논의하지 않겠습니다. 이 기사에서는 브라우저의 앞으로, 뒤로, 새로 고침 및 기타 기능을 유지하는 방법에 대해 간략하게 설명합니다.
여기서는 각각 많은 양의 텍스트와 그림이 포함된 두 개의 탭이 있는 페이지를 가정합니다. 지금 Tab2의 내용이 좋다고 생각하시면 즐겨찾기에 추가하시거나 친구에게 보내주세요. 다음에 즐겨찾기를 통해 열거나 친구가 이 링크를 클릭하면 Tab1의 내용이 보일 가능성이 높으며, 보고 싶은 내용을 보려면 Tab2를 다시 클릭해야 합니다. 페이지 로직이 더 복잡하다면 보고 싶은 콘텐츠로 돌아가기 위해 여러 단계를 수행해야 할 수도 있는데 이는 좋은 경험이 아닙니다.
새로 고침, 즐겨찾기 추가 등의 기능이 제대로 작동하려면 현재 작업이 URI에 반영되어야 합니다. 그러나 URI를 변경해도 페이지가 새로 고쳐지지 않으므로 URI의 조각을 변경하면 됩니다. 예를 들어 Tab1을 클릭하면 URI가 http://www.example.com/example.html#tab1로 변경되고, Tab2를 클릭하면 URI가 http://www.example.com/example.html#tab2로 변경됩니다.

코드 복사 코드는 다음과 같습니다.

function ShowTab1() {
$ ("# tab2").hide();
$("#tab1").show();
window.location.hash = "#tab1"
function ShowTab2 () {
$("#tab1").hide();
$("#tab2").show()
window.location.hash = "#tab2"; };


이렇게 하면 URI가 변경되지만 http://www.example.com/example.html#tab1을 통하든 http://www.example.com/example을 통하든 상관없습니다. .html# tab2로 접속한 페이지는 Tab1의 내용을 표시하므로, 페이지 로딩 시 # 이후의 내용을 읽어야 합니다.

코드 복사 코드는 다음과 같습니다.

$(document).ready(ShowTab( ));

function ShowTab() {
if (window.location.hash == "#tab2")
ShowTab2()
else
ShowTab1()>}


이렇게 하면 새로고침, 즐겨찾기 추가 등의 기능은 이미 가능하지만, 전달하고 돌아가는 것은 여전히 ​​번거롭습니다. 이 두 버튼을 사용할 수 있게 되었지만 클릭해도 웹 페이지의 내용은 변경되지 않았습니다. body의 onhashchange 이벤트를 사용해야 합니다. onhashchange 이벤트는 모든 브라우저에서 지원되지 않습니다. 이 이벤트를 지원하지 않는 브라우저가 # 이후의 콘텐츠 변경 사항도 감지하도록 하려면 window.location.hash의 변경 사항을 정기적으로 감지하는 함수를 작성하거나 구현해야 할 수도 있습니다. onhashchange 이벤트를 직접 경험해 보세요.

샘플 코드 패키지 다운로드
(Visual Studio 2010)