자바스크립트 히스토리 객체에 대한 자세한 설명

이전 단어

기록 개체는 창이 열린 순간부터 사용자의 인터넷 액세스 기록을 저장합니다. 보안 문제로 인해 개발자는 사용자 브라우저의 URL을 알 수 없지만, 사용자가 방문한 페이지 목록을 통해 실제 URL을 알지 못한 채 앞뒤로 이동할 수 있습니다. 이번 글에서는 히스토리의 URL 개수를 저장하는 BOM의 히스토리 객체

length

history.length 속성에 대해 자세히 소개하겠습니다. 처음에는 이 값이 1입니다. 현재 창이 세 개의 URL을 방문했다면, History.length 속성은 3과 같습니다

IE10+ 브라우저는 처음에 2를 반환하므로 호환성 문제가 있어서 이 값은 일반적으로 사용되지 않습니다

history.length // 初始时，该值为1
history.length // 访问三个网址后，该值为3

점프 방법

기록 개체는 go(), back() 및 앞으로()를 포함하여 검색 기록 간에 이동할 수 있는 일련의 메서드를 제공합니다

【go()】

사용자 기록에서 임의로 이동하려면 go() 메서드를 사용하세요. 이 메소드는 뒤로 또는 앞으로 이동할 페이지 수를 나타내는 정수 값인 매개변수를 수신합니다. 음수는 뒤로 점프를 나타내고(뒤로 버튼과 유사) 양수는 앞으로 점프를 나타냅니다(앞으로 버튼과 유사)

//后退一页
history.go(-1)
//前进一页
history.go(1);
//前进两页
history.go(2);

go() 메서드 없음 , History.go(0)와 동일하며 현재 페이지를 새로 고칠 수 있습니다.

//刷新当前页面
history.go();
//刷新当前页面
history.go(0);

[back()]

back() 메소드는 브라우저를 모방하는 데 사용됩니다. 역사.go(-1)에 해당하는 뒤로 버튼

[forward()]

forward() 메서드는 브라우저의 앞으로 버튼을 모방하는 데 사용되며, 역사.go(1에 해당) )

//后退一页
history.back()
//前进一页
history.forward()

이동된 위치가 접속 내역의 경계를 벗어나는 경우 위의 세 가지 방법은 오류를 보고하지 않고 조용히 실패합니다

[참고] 사용 시 기록 레코드의 경우 페이지는 일반적으로 서버에 새 웹 페이지를 보내도록 다시 요청하는 대신 브라우저 캐시에서 로드됩니다.

기록 변경

HTML5는 기록 개체인 기록에 두 가지 새로운 메소드를 추가합니다. pushState() 및 History.replaceState()는 검색 기록에 기록을 추가하고 수정하는 데 사용됩니다. state 속성은 레코드 객체를 저장하는 데 사용되고, popstate 이벤트는 기록 객체의 변경 사항을 모니터링하는 데 사용됩니다.

[참고] IE9-browser는

[pushState()]를 지원하지 않습니다.

History.pushState() 메서드는 브라우저 기록에 상태를 추가합니다. pushState() 메서드는 상태 개체, 제목(현재는 무시됨) 및 선택적 URL 주소의 세 가지 매개 변수를 사용합니다.

history.pushState(state, title, url);

상태 개체 - 상태 객체는 pushState() 메소드에 의해 생성된 기록과 관련된 JavaScript 객체입니다. 사용자가 새로운 상태로 이동하면 popstate 이벤트가 트리거됩니다. 이벤트의 상태 속성에는 기록의 상태 개체가 포함되어 있습니다. 이 객체가 필요하지 않은 경우 null

title - 새 페이지의 제목을 입력할 수 있지만 현재 모든 브라우저는 이 값을 무시하므로 null

URL을 입력할 수 있습니다. this 매개변수는 새 기록 레코드의 주소를 제공합니다. 새 URL은 현재 URL과 동일한 도메인에 있어야 합니다. 그렇지 않으면 pushState()에서 예외가 발생합니다. 이 매개변수는 별도로 표시하지 않으면 문서의 현재 URL로 설정됩니다.

현재 URL이 example.com/1.html이라고 가정하고 pushState 메소드를 사용하여 추가합니다. 탐색 기록(history 객체)에 새 기록

var stateObj = { foo: 'bar' };
history.pushState(stateObj, 'page 2', '2.html');

위의 새 기록 추가 후 브라우저 주소 표시줄에 바로 example.com/2.html이 표시되지만 점프하지는 않습니다. 2.html로 변경하거나 2.html이 존재하는지 확인하지 않아도 검색 기록의 최신 항목이 됩니다. 이때 google.com을 방문하신 후 뒤로가기 버튼을 클릭하시면 해당 페이지의 URL은 2.html로 표시되지만, 내용은 여전히 ​​원래의 1.html입니다. 되감기 버튼을 다시 클릭하면 URL에 동일한 내용이 포함된 1.html이 표시됩니다.

즉, pushState 메소드는 페이지 새로 고침을 실행하지 않고 기록 개체만 변경하고 표시된 주소를 발생시킵니다.

pushState의 url 매개변수가 새로운 앵커 값(예: 해시)을 설정하면 새 URL과 이전 URL의 해시만 다르더라도 hashchange 이벤트가 발생하지 않습니다.

설정한 경우 크로스 도메인 URL을 지정하면 오류가 발생합니다. 이 설계의 목적은 악성 코드로 인해 사용자가 자신이 다른 웹사이트에 있다고 생각하게 만드는 것을 방지하는 것입니다

// 报错
history.pushState(null, null, 'https://twitter.com/hello');

[replaceState()]

history.replaceState의 매개변수 pushState 메소드는 replacementState() 메소드가 새 항목을 생성하는 대신 현재 기록 항목을 수정한다는 점을 제외하면 완전히 동일합니다.

현재 웹페이지가 example.com/example이라고 가정합니다. .html

history.pushState({page: 1}, 'title 1', '?page=1');
history.pushState({page: 2}, 'title 2', '?page=2');
history.replaceState({page: 3}, 'title 3', '?page=3');
history.back()
// url显示为http://example.com/example.html?page=1
history.back()
// url显示为http://example.com/example.html
history.go(2)
// url显示为http://example.com/example.html?page=3

[state]

history.state 속성은 현재 페이지의 상태 객체를 반환합니다

history.pushState({page: 1}, 'title 1', '?page=1');
history.state// { page: 1 }

[popstate 이벤트]

동일할 때마다 문서의 탐색 기록(즉, 기록 객체)이 변경되면 popstate 이벤트가 트리거됩니다.

단지 pushState 메소드를 호출하거나 replacementState 메소드는 이 이벤트를 트리거하지 않습니다. 사용자가 뒤로 버튼과 앞으로 버튼을 클릭하거나 javascript를 사용하여 back(), forward(), go() 메소드를 호출하는 경우에만 해당됩니다. 또한, 이 이벤트는 동일한 문서만 대상으로 하며, 검색 기록이 전환되어 다른 문서가 로드되는 경우 이벤트가 발생하지 않습니다.

사용 시 popstate 이벤트에 대한 콜백 함수를 지정할 수 있습니다. 이 콜백 함수의 매개변수는 이벤트 이벤트 객체이고, 해당 상태 속성은 현재 URL에 대한 pushState 및 replacementState 메소드에서 제공하는 상태 객체를 가리킵니다(즉, 이 두 메소드의 첫 번째 매개변수)

window.onpopstate = function (event) {
 console.log('location: ' + document.location);
 console.log('state: ' + JSON.stringify(event.state));
};　　

上面代码中的event.state，就是通过pushState和replaceState方法，为当前URL绑定的state对象

这个state对象也可以直接通过history对象读取

var currentState = history.state;

往返缓存

默认情况下，浏览器会在当前会话(session)缓存页面，当用户点击“前进”或“后退”按钮时，浏览器就会从缓存中加载页面

浏览器有一个特性叫“往返缓存”(back-forward cache或bfcache)，可以在用户使用浏览器的“后退”和“前进”按钮时加快页面的转换速度。这个缓存中不仅保存着页面数据，还保存了DOM和javascript的状态；实际上是将整个页面都保存在了内存里。如果页面位于bfcache中，那么再次打开该页面时就不会触发load事件

[注意]IE10-浏览器不支持

【pageshow】

pageshow事件在页面加载时触发，包括第一次加载和从缓存加载两种情况。如果要指定页面每次加载(不管是不是从浏览器缓存)时都运行的代码，可以放在这个事件的监听函数

第一次加载时，它的触发顺序排在load事件后面。从缓存加载时，load事件不会触发，因为网页在缓存中的样子通常是load事件的监听函数运行后的样子，所以不必重复执行。同理，如果是从缓存中加载页面，网页内初始化的JavaScript脚本(比如DOMContentLoaded事件的监听函数)也不会执行

[注意]虽然这个事件的目标是document，但必须将其事件处理程序添加到window

pageshow事件有一个persisted属性，返回一个布尔值。页面第一次加载时或没有从缓存加载时，这个属性是false；当页面从缓存加载时，这个属性是true

(function(){
 var showCount = 0;
 window.onload = function(){
  console.log('loaded');
 }
 window.onpageshow = function(e){
  e = e || event;
  showCount ++;
  console.log(e.persisted,showCount + 'times');
 }
})();

[注意]上面的例子使用了私有作用域，以防止变量showCount进入全局作用域。如果单击了浏览器的“刷新”按钮，那么showCount的值就会被重置为0，因为页面已经完全重新加载了

【pagehide】

与pageshow事件对应的是pagehide事件，该事件会在浏览器卸载页面的时候触发，而且是在unload事件之前触发。与pageshow事件一样，pagehide在document上面触发，但其事件处理程序必须要添加到window对象

[注意]指定了onunload事件处理程序的页面会被自动排除在bfcache之外，即使事件处理程序是空的。原因在于，onunload最常用于撤销在onload中所执行的操作，而跳过onload后再次显示页面很可能就会导致页面不正常

pagehide事件的event对象也包含persisted属性，不过其用途稍有不同。如果页面是从bfcache中加载的，那么persisted的值就是true；如果页面在卸载之后会被保存在bfcache中，那么persisted的值也会被设置为true。因此，当第一次触发pageshow时，persisted的值一定是false，而在第一次触发pagehide时，persisted就会变成true(除非页面不会被保存在bfcache中)

window.onpagehide = function(e){
 e = e || event;
 console.log(e.persisted);
}

以上就是本文的全部内容，希望本文的内容对大家的学习或者工作能带来一定的帮助，同时也希望多多支持PHP中文网！

更多javascript history对象详解相关文章请关注PHP中文网！