JavaScript의 History API를 사용하면 검색 엔진에서 AJAX 콘텐츠_javascript 팁을 크롤링할 수 있습니다.
- WBOY원래의
- 2016-05-16 15:27:311271검색
Facebook 사진 앨범을 탐색할 때 페이지가 부분적으로 새로 고쳐지면 주소 표시줄의 주소도 변경되고 해시 방식이 아니라는 사실을 발견하셨나요? HTML5 히스토리의 여러 가지 새로운 API를 사용합니다. 창의 전역 변수로서 히스토리는 HTML4 시대에 새로운 것이 아닙니다. 우리가 자주 사용하는 것은 History.back()과 History.go()입니다.
이틀 전 Discourse의 창립자 중 한 명인 Robin Ward의 솔루션을 보기 전까지는 항상 방법이 없다고 생각했고, 놀라움을 금할 수 없었습니다.
Discourse는 Ajax에 크게 의존하는 포럼 프로그램이지만 Google이 콘텐츠를 포함할 수 있도록 허용해야 합니다. 해결책은 파운드 기호 구조를 버리고 History API를 채택하는 것입니다.
히스토리 API라고 불리는 것은 페이지를 새로 고치지 않고 브라우저 주소 표시줄에 표시된 URL을 변경하는 것(정확히 말하면 웹페이지의 현재 상태를 변경하는 것)을 말합니다. 다음은 위의 버튼을 클릭하여 음악 재생을 시작하는 예입니다. 그런 다음 아래 링크를 다시 클릭하여 어떻게 되는지 확인해 보세요.
주소 표시줄의 URL이 변경되었지만 음악 재생은 중단되지 않습니다!
History API에 대한 자세한 소개는 이 글의 범위를 벗어납니다. 간단히 말하면, 그 기능은 브라우저의 History 객체에 기록을 추가하는 것입니다.
window.history.pushState(상태 개체, 제목, URL);
위 명령줄을 사용하면 주소 표시줄에 새 URL이 표시됩니다. History 개체의 pushState 메서드는 세 번째 매개변수를 허용합니다. 처음 두 매개변수는 null일 수 있습니다.
window.history.pushState(null, null, newURL)
현재 Chrome(26.0), Firefox(20.0), IE(10.0), Safari(5.1), Opera(12.1) 등 모든 주요 브라우저에서 이 방법을 지원합니다.
로빈 워드의 방법은 다음과 같습니다.
먼저, History API를 사용하여 해시 마크 구조를 대체합니다. 그러면 각 해시 마크가 일반 경로가 있는 URL이 되어 검색 엔진이 모든 웹 페이지를 크롤링할 수 있습니다.
Example.com/1
example.com/2
example.com/3
그런 다음 Ajax 부분을 처리하고 URL을 기반으로 콘텐츠를 크롤링하는 JavaScript 함수를 정의합니다(jQuery가 사용된다고 가정).
function anchorClick(link) {
var linkSplit = link.split('/').pop();
$.get('api/' + linkSplit, function(data) {
$('#content').html(data);
});
}
마우스 클릭 이벤트를 재정의합니다.
$('#container').on('click', 'a', function(e) {
window.history.pushState(null, null, $(this).attr('href'));
anchorClick($(this).attr('href'));
e.preventDefault();
});
또한 사용자가 브라우저의 '앞으로/뒤로' 버튼을 클릭하는 것도 고려하세요. 이때 History 객체의 popstate 이벤트가 발생합니다.
window.addEventListener('popstate', function(e) {
anchorClick(location.pathname);
});
위 세 가지 코드를 정의한 후 페이지를 새로 고치지 않고도 일반 경로 URL과 AJAX 콘텐츠를 표시할 수 있습니다.
마지막으로 서버측을 설정합니다.
파운드 기호 구조를 사용하지 않기 때문에 각 URL은 서로 다른 요청입니다. 따라서 서버는 404 오류를 방지하기 위해 이러한 모든 요청에 대해 다음 구조의 웹 페이지를 반환해야 합니다.
<html> <body> <section id='container'></section> <noscript> ... ... </noscript> </body> </html>
위 코드를 자세히 보면 noscript 태그를 찾을 수 있는데, 이것이 바로 비밀입니다.
우리는 검색 엔진이 포함하기를 원하는 모든 콘텐츠를 noscript 태그에 넣습니다. 이 경우 사용자는 페이지를 새로 고치지 않고도 AJAX 작업을 수행할 수 있지만 검색 엔진에는 각 웹 페이지의 주요 콘텐츠가 포함됩니다.