English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
HTML5역사 기록 API의 사용 방법, 온라인 예제를 통해 HTML5역사 기록 API의 사용 방법, 브라우저의 호환성, 문법 정의 및 속성 값 자세정보 등.
HTML5역사 기록 API를 통해 JavaScript를 사용하여 브라우저의 탐색 기록에 접근할 수 있습니다. HTML5역사 기록 API는 단일 페이지 웹 애플리케이션에서 매우 유용합니다. 단일 페이지 웹 애플리케이션은 HTML5역사 기록 API를 사용하여 애플리케이션에서 특정 상태를 "표시할 수 있습니다". 나중에, 역사 기록 API를 사용하여 단일 페이지 애플리케이션에서 표시할 수 있는 상태를 설정하는 방법에 대해 다시 말씀드리겠습니다.
브라우징 기록은 URL의 쌓임으로 구성되어 있습니다. 사용자가 동일한 웹사이트에서 탐색할 때마다, 새 페이지의 URL이 스택의 상단에 위치합니다. 사용자가 "뒤로" 버튼을 클릭하면, 스택의 포인터가 스택의 이전 요소로 이동합니다. 사용자가 다시 "이전" 버튼을 클릭하면, 포인터가 스택의 상단 요소로 이동합니다. 사용자가 "뒤로"를 클릭한 후 새 링크를 클릭하면, 스택의 상단 요소가 새 URL로 덮어씌움.
이는 역사 기록 스택의 예입니다：
http://myapp.com/great-new-story.html http://myapp.com/news.html http://myapp.com
위의 역사 기록 스택에서 접근한 마지막 페이지는 http://myapp.com/great-new-story.html. 사용자가 "뒤로" 버튼을 클릭하면, 역사 기록 스택의 포인터가 다시 이동합니다 http://myapp.com/news.html. 사용자가 "이전" 버튼을 클릭하면, 역사 기록 스택 포인터가 앞으로 이동합니다 http://myapp.com/great-new-story.html이지만, 사용자가 다른 링크( http://myapp.com/news.html 페이지에서), 그러면 링크의 URL은 http://myapp.com/news.html이 역사 기록 스택에서 덮어씌움.
HTML5히스토리 API는 웹 애플리케이션이 이 히스토리 스택에 접근할 수 있도록 합니다.
HTML5히스토리 API는 웹 페이지가 자신과 동일한 도메인에 있는 일부 히스토리만 접근할 수 있도록 허용합니다. 보안 이유로 이 제한은 필수적입니다. 따라서 웹 페이지는 사용자가 방문한 다른 웹사이트를 볼 수 없습니다.
동일하게, HTML5히스토리 API는 웹 페이지가 도메인과 다른 도메인의 URL을 히스토리 스택에 푸시하는 것을 허용하지 않습니다. 이 제한은 사용자가 웹 페이지를 입력할 때 웹 페이지가 사용자가 PayPal로 이동한 것을 가장하지 않도록 보장합니다./비밀번호 등.
히스토리 객체를 통해 브라우저 히스토리에 접근할 수 있습니다. 이 객체는 JavaScript에서 전역 객체로 사용될 수 있습니다(실제로는 window.history입니다).
히스토리 객체는 다음 기능을 포함합니다-히스토리 API를 포함합니다：
back()
forward()
go(index)
pushState(stateObject, title, url)
replaceState(stateObject, title, url)
back() 기능은 브라우저 히스토리를 이전 URL로 이동시킵니다. back() 호출은 사용자가 브라우저의 "뒤로" 버튼을 클릭하는 것과 동일한 효과를 가집니다.
forward() 기능은 브라우저 히스토리를 히스토리의 다음 페이지로 이동시킵니다. forward() 호출은 브라우저의 "전진" 버튼을 클릭하는 것과 동일한 효과를 가집니다. back() 함수를 호출하거나 "뒤로" 버튼을 클릭할 때만 가능합니다. 히스토리가 이미 브라우저 히스토리의 가장 최신 URL을 가리키면 어떤 전진 방향도 없습니다.
go(index) 함수는 go() 함수에 매개변수로 전달된 인덱스에 따라 히스토리를 뒤로나 앞으로 이동할 수 있습니다. go()를 음수 인덱스로 호출하면(예를 들어, go(...)-1...))이면 브라우저는 히스토리를 반환합니다. go() 함수에 양수 인덱스를 전달하면 브라우저가 히스토리에서 앞으로 이동합니다(예를 들어, go(...)1...))는 히스토리에서 앞으로나 뒤로 이동하려는 단계를 나타냅니다. 예를 들어, ...1...2...-1...-2...
이 pushState(stateObject, title, url) 함수는 새로운 URL을 히스토리 스택에 푸시합니다. 이 함수는 세 가지 매개변수를 가집니다. url은 히스토리 스택에 푸시될 URL입니다. title 매개변수는 일반적으로 브라우저에 무시됩니다. stateObject는 새로운 URL이 히스토리 스택에 푸시될 때 이벤트와 함께 전달되는 객체입니다. 이 stateObject는 원하는 모든 데이터를 포함할 수 있습니다. 그것은 단순히 JavaScript 객체입니다.
replaceState(stateObject, title, url) 함수의 기능은 pushState() 함수와 유사하지만, 히스토리 스택의 현재 요소를 새 URL로 대체합니다. 현재 요소는 항상 중요한 요소가 아니며, 현재 가리키고 있는 요소는 스택의 어떤 요소일 수 있습니다. back(), forward(), go() 함수가 이미 history 객체에 호출된 경우로, 이 요소는 스택의 어떤 요소일 수 있습니다.
이제 HTML에 대한 몇 가지 내용을 살펴보겠습니다.5히스토리 API의 예제.
먼저 back()과 forward() 함수를 사용하여 히스토리에서 왕래하는 방법을 보겠습니다:
history.back(); history.forward();
기억해 주세요, history 객체는 window 객체에 위치하므로 다음과 같이 작성할 수도 있습니다:
window.history.back(); window.history.forward();
그러나 window 객체는 기본 객체이므로 생략할 수 있습니다. 이 강의의 나머지 부분에서는 window 객체를 무시하겠습니다.
기억해 주세요, 제거하거나 (사용자가) 먼저 히스토리를 이동하면 제거할 수 없습니다.
이제 go() 함수를 사용하여 back()과 forward() 함수와 유사한 작업을 수행하는 방법을 보겠습니다. 먼저, go() 함수를 사용하여 히스토리를 뒤로 돌아가는 이전 단계는 다음과 같습니다:
history.go(-1;
이제 두 단계 뒤로 이동하려면 다음과 같이 할 수 있습니다:-2파라미터는 다음과 같이 go() 함수에 전달됩니다:
history.go(-2;
또한, 히스토리를 앞으로 나아가게 하려면 go() 함수에 정적 인덱스를 전달할 수 있습니다. 이는 역사에서 한 단계 앞으로 나아가고 두 단계 앞으로 나아가는 두 가지 예제입니다:
history.go(1; history.go(2;
물론, 두 행을 동시에 실행하면 브라우저의 히스토리가 총으로 앞으로 이동합니다.3단계.
스테이트를 히스토리 레코드 스택에 푸시하려면 history 객체의 pushState() 함수를 호출하십시오. 이는 pushState() 예제입니다:
var state = {};
var title = "";
var url = "next"-page.html";
history.pushState(state, title, url);이 예제에서는 새 URL을 히스토리 레코드 스택에 푸시합니다. 이는 브라우저의 주소 필드에 URL을 변경하지만, 브라우저가 해당 URL을 로드하려는 시도를 유발하지 않습니다.
replaceState() 함수는 현재 히스토리 스택에 있는 history 요소를 대체합니다. 사용자가 "뒤로" 버튼을 사용하여 히스토리로 돌아갔을 때, 이는 가장 중요한 요소가 아니 될 수 있습니다. 이는 replaceState() 예제입니다:
var state = {};
var title = "";
var url = "another-page.html";
history.replaceState(state, title, url);replaceState()도 브라우저의 주소 필드의 URL을 변경하지만, 브라우저가 해당 URL을 로드하지 않습니다. URL을 대체한 페이지는 여전히 브라우저에 남아 있습니다.
HTML5히스토리 API는 웹 페이지가 브라우저 히스토리 변경을 감지할 수 있게 합니다. 보안 제한도 적용되므로, 웹 페이지는 URL이 웹 페이지 도메인을 벗어나는 히스토리 변경을 알림을 받지 않습니다.
브라우저 히스토리 변경을 감지하려면, window 객체에 onpopstate 리스너를 설정하세요. 이는 브라우저 히스토리 이벤트 리스너의 예제입니다:
window.onpopstate = function(event){
console.log("히스토리 변경됨: ") + document.location.href);
}onpopstate 이벤트 처리 함수는 같은 페이지 내의 브라우저 히스토리 변경(브라우저의 히스토리, 페이지가 히스토리 스택에 푸시됨)이 발생할 때마다 호출됩니다. 히스토리 변경 이벤트에 대한 반응은 URL에서 파라미터를 추출하고 해당 내용을 페이지에 로드하는 것이 될 수 있습니다(예: AJAX를 통해).
주의: 변경된 것이 "뒤로" 또는 "앞으로" 버튼, 또는相应的历史导航功能 back(), forward(), go()만이 onpopstate 이벤트 리스너가 호출됩니다. pushState()와 replaceState() 함수 호출은 히스토리 변경 이벤트를 트리거하지 않습니다.
새 URL을 히스토리 스택에 푸시할 때, 브라우저의 주소 필드의 URL은 새 URL로 변경됩니다. 하지만, 브라우저는 해당 URL을 로드하려고 시도하지 않습니다. URL을 표시하고 스택에 푸시하는 것만으로, 브라우저가 페이지를 방문한 것처럼 보이지만, 푸시된 새 상태의 페이지는 여전히 브라우저에 남아 있습니다.
새 URL을 히스토리 스택에 푸시하는 것은SPA(Single Page Application)에서 특정 상태를 책마크로 추가하는 유용한 방법입니다. 예를 들어, 단일 페이지 온라인 상점에서, 애플리케이션의 URL은 다음과 같을 수 있습니다:
http://myshop.com
이 애플리케이션은 페이지에서 사용자에게 제품을 표시할 수 있을 수 있지만, 사용자는 특정 제품의 링크를 친구에게 어떻게 보내야 할까요?
해결책은, 새 제품을 로드할 때, 단일 페이지 애플리케이션이 새 URL을 히스토리 스택에 푸시하는 것입니다. 이는 새 URL을 로드하지 않지만, 실제로는 브라우저 주소 필드에 새 URL이 표시되도록 합니다. 이를 통해 북마크로 추가하거나 이메일 등에 복사 붙여넣을 수 있습니다. 이러한 북마크 가능한 URL의 예제는 다음과 같습니다:
http://myshop.com?productId=234
또는, 더 읽기 쉬운 URL이 될 수도 있습니다:
http://myshop.com/products/234
또는 REST보다 약간 더 복잡한 버전(제품 유형도 언급됩니다):
http://myshop.com/products/books/234
URL을 브라우저의 히스토리에 푸시한 후, 웹 상점 페이지는 AJAX를 통해 해당 제품을 로드하고 사용자에게 표시합니다.
사용자가 "뒤로" 버튼을 클릭하면 onpopstate가 이벤트 처리기를 호출합니다. 그런 다음, 웹 페이지는 새로운 URL이 무엇인지 확인하고, URL이 반환되면 해당 URL에 맞는 제품이나 애플리케이션의 메인 페이지 http://myshop.com.
이것은 하나의 HTML5AJAX를 사용하여 데이터를 브라우저에 로드하는 원리를 설명하는 코드 예제입니다:
<a href="javascript:push('http://myshop.com/books/123');">
Book 123
</a><br/>
<a href="javascript:push('http://myshop.com/apps/456');">
App 456
</a>
<script>
function loadUrl(url) {
console.log("loading data from url: " + url);
}
function push(url) {
history.pushState(null, null, url);
loadUrl(url);
}
window.onpopstate = function(event) {
console.log("history changed to: " + document.location.href);
loadUrl(document.location.href);
}
</script>이 예제는 두 개의 JavaScript Click 리스너를 가진 링크를 포함하고 있습니다. 링크 중 하나를 클릭하면 해당 URL이 히스토리 스택에 푸시되고 브라우저에 로드됩니다.
이 예제는 사용자가 "뒤로" 또는 "앞으로" 버튼을 클릭할 때 발생하는 onpopstate 이벤트 리스너를 포함하고 있습니다. 이 이벤트 리스너는 현재 브라우저 주소 필드에 표시된 모든 URL을 로드합니다.
사용자가 링크를 클릭하고 "뒤로" /"앞으로" 버튼을 클릭하면 앞에서 표시된 예제가 적용됩니다. 하지만, 사용자가 URL을 친구에게 보내거나 북마크에 추가하고 나중에 접근할 때는 어떻게 해야 합니까?
사용자가 태그가 추가된 URL에 접근하려고 시도하면, http://myshop.com/books/123이 경우 브라우저는 해당 URL에 대한 웹 서버에 요청을 보냅니다. 웹 서버는 URL에서 보낸 것과 같은 단일 페이지 애플리케이션을 다시 보내야 합니다. http://myshop.com. 이 작업을 수행하기 위해 웹 서버를 구성해야 합니다.
동일하게, 단일 페이지 웹 애플리케이션은 최초로 로드했을 때 사용한 URL을 확인하고, 해당 URL을 사용하여 로드하고 표시할 내용을 결정해야 합니다. 따라서 단일 페이지 애플리케이션이 URL을 로드한 경우 myshop.com/books/123이 애플리케이션은 해당 제품을 로드하고 표시해야 합니다. 이 URL 검사는 단일 페이지 애플리케이션 초기화 중에 수행해야 합니다.
이 글을 작성할 때, Opera Mini를 제외한 모든 현대 브라우저(IE, Safari, Chrome, Firefox)는 HTML을 지원합니다5히스토리 API.