pushState 및 replacementState 사용 단계에 대한 자세한 설명
이번에는 pushState 및 replacementState 사용 단계에 대해 자세히 설명하겠습니다. pushState 및 replacementState 사용 시 주의사항은 무엇인가요?
1. 소개
HTML5에는 기록 항목을 각각 추가하고 수정할 수 있는 History.pushState() 및 History.replaceState() 메서드가 도입되었습니다. 이러한 메서드는 일반적으로 window.onpopstate와 함께 사용됩니다.
2. pushState() 메소드의 예
다음 JavaScript 코드가 http://mozilla.org/foo.html에서 실행된다고 가정합니다.
var stateObj = { foo: "bar" };
history.pushState(stateObj, "page 2", "bar.html");이렇게 하면 브라우저 주소 표시줄이 표시됩니다. http://mozilla.org/bar.html과 같지만 브라우저가 bar.html을 로드하거나 bar.html이 존재하는지 확인하지도 않습니다.
이제 사용자가 http://google.com을 방문하고 뒤로 버튼을 클릭한다고 가정해 보겠습니다. 이때 주소 표시줄에는 http://mozilla.org/bar.html이 표시되고 페이지는 popstate 이벤트를 트리거합니다. 이벤트 객체 상태에는 stateObj의 복사본이 포함됩니다. 페이지 자체는 foo.html과 동일하지만 내용은 popstate 이벤트에서 수정될 수 있습니다.
뒤로 버튼을 다시 클릭하면 페이지 URL이 http://mozilla.org/foo.html로 변경되고 문서 객체 문서가 또 다른 popstate 이벤트를 트리거합니다. 이번에는 이벤트 객체 상태 객체가 null입니다. 여기서도 마찬가지입니다. 반환하면 문서의 내용이 변경되지 않습니다. 비록 문서가 popstate 이벤트를 수신할 때 내용이 변경될 수 있지만 해당 내용은 여전히 이전 프레젠테이션과 일치합니다.
3. pushState() 메서드
pushState()에는 상태 개체, 제목(현재 무시됨) 및 URL(선택 사항) 세 가지 매개 변수 세부 정보가 필요합니다.
State 객체 — 상태 객체 state는 pushState()를 통해 새로운 기록 항목을 생성하는 JavaScript 객체입니다. 사용자가 새 상태로 이동할 때마다 popstate 이벤트가 시작되고 이벤트의 상태 속성에는 기록 항목의 상태 객체 복사본이 포함됩니다.
Title — 이 매개변수는 현재 무시되지만 향후 사용될 수 있습니다. 빈 문자열을 전달하는 것은 여기서는 안전하지만 나중에는 안전하지 않습니다. 또는 점프 상태에 대한 짧은 제목을 전달할 수 있습니다.
URL — 이 매개변수는 새로운 기록 URL 레코드를 정의합니다. 브라우저는 pushState() 호출 직후에 이 URL을 로드하지 않지만 나중에 사용자가 브라우저를 다시 열 때와 같은 특정 상황에서는 이 URL을 로드할 수 있습니다. 새 URL은 절대 경로일 필요는 없습니다. 새 URL이 상대 경로인 경우 현재 URL을 기준으로 상대 경로로 처리됩니다. 새 URL은 현재 URL과 동일한 출처를 가져야 합니다. 그렇지 않으면 pushState()에서 예외가 발생합니다. 이 매개변수는 선택사항이며 기본값은 현재 URL입니다.
4 pushState() 메서드와 해시 값 설정의 차이점
어떤 의미에서 pushState()를 호출하는 것은 window.location = "#foo"를 설정하는 것과 비슷합니다. 둘 다 현재 페이지를 클릭하고 새 기록을 활성화하세요. 그러나 pushState()에는 다음과 같은 장점이 있습니다.
새 URL은 현재 URL과 동일한 출처를 가진 모든 URL이 될 수 있습니다. 그리고 window.location을 설정하면 해시만 수정한 경우에만 동일한 파일이 유지됩니다.
필요한 경우 URL을 변경하지 않고 기록 레코드를 생성할 수 있습니다. window.location = "#foo";를 설정하면 현재 해시가 #foo가 아닌 경우에만 새 기록 항목이 생성됩니다.
모든 데이터를 새로운 기록 항목과 연결할 수 있습니다. 해시 값 기반 방법을 사용하면 모든 관련 데이터를 짧은 문자열로 인코딩해야 합니다.
5. replacementState() 메소드
History.replaceState()의 사용은 History.pushState()와 매우 유사합니다. 차이점은 교체State()가 새 기록 항목을 생성하는 대신 현재 기록 항목을 수정한다는 것입니다. .
6.팝스테이트 이벤트
每当处于激活状态的历史记录条目发生变化时,popstate 事件就会在对应window对象上触发。 如果当前处于激活状态的历史记录条目是由history.pushState()方法创建,或者由history.replaceState()方法修改过的, 则popstate事件对象的state属性包含了这个历史记录条目的state对象的一个拷贝。
我们也可以直接在history对象上获取state，如下：
var currentState = history.state;
需要注意的是，调用 history.pushState() 或者 history.replaceState() 不会触发 popstate 事件。 opstate事件只会在浏览器某些行为下触发， 比如点击后退、前进按钮(或者在JavaScript中调用history.back()、history.forward()、history.go()方法)。
七、popstate 事件的例子
假如当前网页地址为 http://example.com/example.html ,则运行下述代码后:
window.onpopstate = function(event) {
alert("location: " + document.location + ", state: " + JSON.stringify(event.state));
};
//绑定事件处理函数.
history.pushState({page: 1}, "title 1", "?page=1"); //添加并激活一个历史记录条目 http://example.com/example.html?page=1,条目索引为1
history.pushState({page: 2}, "title 2", "?page=2"); //添加并激活一个历史记录条目 http://example.com/example.html?page=2,条目索引为2
history.replaceState({page: 3}, "title 3", "?page=3"); //修改当前激活的历史记录条目 http://ex..?page=2 变为 http://ex..?page=3,条目索引为3
history.back(); // 弹出 "location: http://example.com/example.html?page=1, state: {"page":1}"
history.back(); // 弹出 "location: http://example.com/example.html, state: null
history.go(2); // 弹出 "location: http://example.com/example.html?page=3, state: {"page":3}八、pushState()的用途
王二使用 pushState() 主要是它可以监听到浏览器上的返回事件，这在移动端上也同样适用，参考如下一段代码(可以直接运行）：
<body>
<p>window.onpopstate可以监听到返回键事件</p>
<script>
history.pushState({}, "");
window.onpopstate = function(event) {
//这里可以监听到浏览器的返回事件，并做你想做的事情，
//例如：跳转到另一个网页
location.href = "https://www.baidu.com";
};
</script>
</body>当然，用 window.onhashchange 也可以监听到浏览器上的返回事件，参考如下一段代码(可以直接运行）：
<body>
<p>window.onhashchange可以监听到返回键事件</p>
<script>
setTimeout(()=>{
location.hash="a"
},100);
setTimeout(()=>{
window.onhashchange = function(event) {
location.href = "https://www.baidu.com";
}
},200);
</script>
</body>相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！
推荐阅读：
위 내용은 pushState 및 replacementState 사용 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!
핫 AI 도구
Undresser.AI Undress
사실적인 누드 사진을 만들기 위한 AI 기반 앱
AI Clothes Remover
사진에서 옷을 제거하는 온라인 AI 도구입니다.
Undress AI Tool
무료로 이미지를 벗다
Clothoff.io
AI 옷 제거제
AI Hentai Generator
AI Hentai를 무료로 생성하십시오.
인기 기사
뜨거운 도구
메모장++7.3.1
사용하기 쉬운 무료 코드 편집기
SublimeText3 중국어 버전
중국어 버전, 사용하기 매우 쉽습니다.
스튜디오 13.0.1 보내기
강력한 PHP 통합 개발 환경
드림위버 CS6
시각적 웹 개발 도구
SublimeText3 Mac 버전
신 수준의 코드 편집 소프트웨어(SublimeText3)
뜨거운 주제
7467
15
1376
52
77
11
46
19
18
20
C++의 모드 함수에 대한 자세한 설명
Nov 18, 2023 pm 03:08 PM
C++의 모드 함수에 대한 자세한 설명 통계에서 모드는 데이터 집합에서 가장 자주 나타나는 값을 의미합니다. C++ 언어에서는 모드 함수를 작성하여 모든 데이터 세트에서 모드를 찾을 수 있습니다. 모드 기능은 다양한 방법으로 구현될 수 있으며, 일반적으로 사용되는 두 가지 방법을 아래에서 자세히 소개합니다. 첫 번째 방법은 해시 테이블을 사용하여 각 숫자의 발생 횟수를 계산하는 것입니다. 먼저, 각 숫자를 키로, 발생 횟수를 값으로 사용하여 해시 테이블을 정의해야 합니다. 그런 다음 주어진 데이터 세트에 대해 다음을 실행합니다.
Win11에서 관리자 권한을 얻는 방법에 대한 자세한 설명
Mar 08, 2024 pm 03:06 PM
Windows 운영 체제는 세계에서 가장 인기 있는 운영 체제 중 하나이며, 새로운 버전의 Win11이 많은 주목을 받았습니다. Win11 시스템에서 관리자 권한을 얻는 것은 사용자가 시스템에서 더 많은 작업과 설정을 수행할 수 있도록 하는 중요한 작업입니다. 이번 글에서는 Win11 시스템에서 관리자 권한을 얻는 방법과 권한을 효과적으로 관리하는 방법을 자세히 소개하겠습니다. Win11 시스템에서 관리자 권한은 로컬 관리자와 도메인 관리자의 두 가지 유형으로 나뉩니다. 로컬 관리자는 로컬 컴퓨터에 대한 모든 관리 권한을 갖습니다.
Oracle SQL의 나누기 연산에 대한 자세한 설명
Mar 10, 2024 am 09:51 AM
OracleSQL의 나눗셈 연산에 대한 자세한 설명 OracleSQL에서 나눗셈 연산은 두 숫자를 나눈 결과를 계산하는 데 사용되는 일반적이고 중요한 수학 연산입니다. 나누기는 데이터베이스 쿼리에 자주 사용되므로 OracleSQL에서 나누기 작업과 사용법을 이해하는 것은 데이터베이스 개발자에게 필수적인 기술 중 하나입니다. 이 기사에서는 OracleSQL의 나누기 작업 관련 지식을 자세히 설명하고 독자가 참고할 수 있는 특정 코드 예제를 제공합니다. 1. OracleSQL의 Division 연산
C++의 나머지 함수에 대한 자세한 설명
Nov 18, 2023 pm 02:41 PM
C++의 나머지 함수에 대한 자세한 설명 C++에서는 나머지 연산자(%)를 사용하여 두 숫자를 나눈 나머지를 계산합니다. 피연산자가 모든 정수 유형(char, short, int, long 등 포함) 또는 부동 소수점 숫자 유형(예: float, double)일 수 있는 이진 연산자입니다. 나머지 연산자는 피제수와 동일한 부호를 가진 결과를 반환합니다. 예를 들어 정수의 나머지 연산의 경우 다음 코드를 사용하여 구현할 수 있습니다. inta=10;intb=3;
Vue.nextTick 함수의 사용법과 비동기 업데이트에서의 적용에 대한 자세한 설명
Jul 26, 2023 am 08:57 AM
Vue.nextTick 함수의 사용법과 비동기 업데이트에서의 적용에 대한 자세한 설명 Vue 개발에서는 데이터를 비동기적으로 업데이트해야 하는 상황이 자주 발생합니다. 예를 들어 DOM 또는 관련 작업을 수정한 후 즉시 데이터를 업데이트해야 합니다. 데이터가 업데이트된 후 즉시 수행됩니다. 이런 문제를 해결하기 위해 Vue에서 제공하는 .nextTick 함수가 등장했습니다. 이 기사에서는 Vue.nextTick 함수의 사용법을 자세히 소개하고 이를 코드 예제와 결합하여 비동기 업데이트에서의 애플리케이션을 설명합니다. 1. Vue.nex
php-fpm 튜닝 방법에 대한 자세한 설명
Jul 08, 2023 pm 04:31 PM
PHP-FPM은 더 나은 PHP 성능과 안정성을 제공하기 위해 일반적으로 사용되는 PHP 프로세스 관리자입니다. 그러나 부하가 높은 환경에서는 PHP-FPM의 기본 구성이 요구 사항을 충족하지 못할 수 있으므로 이를 조정해야 합니다. 이 기사에서는 PHP-FPM의 튜닝 방법을 자세히 소개하고 몇 가지 코드 예제를 제공합니다. 1. 프로세스 수를 늘리십시오. 기본적으로 PHP-FPM은 요청을 처리하기 위해 소수의 프로세스만 시작합니다. 부하가 높은 환경에서는 프로세스 수를 늘려 PHP-FPM의 동시성을 높일 수 있습니다.
PHP 모듈로 연산자의 역할과 사용법에 대한 자세한 설명
Mar 19, 2024 pm 04:33 PM
PHP의 모듈로 연산자(%)는 두 숫자를 나눈 나머지를 구하는 데 사용됩니다. 이 글에서는 모듈로 연산자의 역할과 사용법을 자세히 논의하고 독자의 이해를 돕기 위해 구체적인 코드 예제를 제공합니다. 1. 모듈로 연산자의 역할 수학에서는 정수를 다른 정수로 나누면 몫과 나머지가 나옵니다. 예를 들어 10을 3으로 나누면 몫은 3이고 나머지는 1입니다. 이 나머지를 얻기 위해 모듈로 연산자가 사용됩니다. 2. 모듈러스 연산자의 사용법 PHP에서는 모듈러스를 나타내기 위해 % 기호를 사용합니다.
리눅스 시스템콜 system() 함수에 대한 자세한 설명
Feb 22, 2024 pm 08:21 PM
Linux 시스템 호출 system() 함수에 대한 자세한 설명 시스템 호출은 Linux 운영 체제에서 매우 중요한 부분으로 시스템 커널과 상호 작용하는 방법을 제공합니다. 그 중 system() 함수는 흔히 사용되는 시스템 호출 함수 중 하나이다. 이 기사에서는 system() 함수의 사용법을 자세히 소개하고 해당 코드 예제를 제공합니다. 시스템 호출의 기본 개념 시스템 호출은 사용자 프로그램이 운영 체제 커널과 상호 작용하는 방법입니다. 사용자 프로그램은 시스템 호출 기능을 호출하여 운영 체제를 요청합니다.
