JavaScript가 URL을 작동하는 방법에 대한 자세한 설명(단일 페이지 애플리케이션에서 일반적으로 사용됨)

JavaScript에는 브라우저 기록을 작동할 수 있는 다양한 메서드가 있습니다. 일반적인 페이지 점프 단일 페이지 애플리케이션에서 리디렉션이든 해시 값 변경이든 이러한 방법을 자주 다루게 됩니다. 특히 단일 페이지 애플리케이션에서는 이러한 방법이 거의 페이지 라우팅의 핵심 방법입니다. 이 문서에서는 이러한 방법을 자세히 설명합니다.

1.document.location

location은 가장 유용한 BOM 개체 중 하나입니다. 현재 창에 로드된 문서에 대한 정보를 제공하고 일부 탐색 기능도 제공합니다. 실제로 위치 개체는 창 개체의 속성이자 문서 개체의 속성입니다. 즉, window.location과 document.location은 동일한 객체입니다. 브라우저가 아닌 문서 환경에 적응하려면 document.location을 사용하는 것이 좋습니다.
a 태그에 설정된 href 속성을 제외하고 가장 일반적으로 사용되는 점프 방법은 다음과 같습니다. window.location.href="xxx"; 실제로 위 코드는 location.sign 메서드를 실행합니다. 간단히 말해서 다음 세 가지 URL 점프의 작성 방법은 완전히 동일합니다. 즉시 새 URL을 열고 브라우저 기록에

document.location.assign("xxx");document.location="xxx";document.location.href="xxx";

로그인 후 복사

라는 기록을 생성합니다. 리디렉션할 URL이 현재 URL과 정확히 동일하면 페이지가 새로 고쳐지지만 브라우저 기록은 추가되지 않습니다.

2.location.replace

기능은 location.href=”xxx”;과 거의 동일하지만 한 가지 차이점은 location.replace가 브라우저 기록에 레코드를 생성하고 이전 레코드를 대체한다는 것입니다. 예를 들어, "a.html" 페이지를 열면 페이지에 다음 두 줄의 코드가 있습니다:

document.location.href="c.html";document.location.replace("b.html");

로그인 후 복사

브라우저는 먼저 location.href를 통해 c.html로 점프한 다음 <를 사용합니다. 🎜 >b.html로 이동합니다. 이때 브라우저의 뒤로 버튼을 클릭하면 c.html의 기록 기록이 교체로 덮어쓰기되었기 때문에 브라우저는 바로 a.html로 돌아갑니다. location.replace

3.window.onhashchange

다음 코드 형식을 통해 브라우저 URL의 해시 값 변경을 모니터링할 수 있습니다.

window.addEventListener("hashchange",function(){
    //do something
},false);//以下代码都会触发hashchange事件
document.location.hash="#a=1";document.location.href="b.html#b=1";document.location.replace("c.html#c=1");

로그인 후 복사

위치를 다시 작성하여 탐색을 발생시키는 경우 서버 URL 해시 값이 변경되면 hashchange 이벤트가 트리거됩니다. URL 재작성으로 인해 페이지가 새로 고쳐지는 경우(예: URL 쿼리 매개변수 변경 또는 교차 도메인 주소로 직접 이동) 해시변경 이벤트가 직접 건너뜁니다. URL 해시 값의 변경이 항상 hashchange 이벤트를 트리거하는 것은 아니라는 점에 유의하십시오. 아래에 소개된 방법은 URL을 변경하지만 hashchange 이벤트를 트리거하지 않는 것입니다.

4.history.pushState

pushState 메소드는 세 가지 매개변수를 받습니다: 기록 상태를 기록하는 객체(이 객체는 popstate 이벤트가 트리거될 때 전달되며 크기 제한이 있습니다) 640K), 기록 제목을 나타내는 문자열, 현재 URL과 동일한 출처를 가진 주소입니다. 일반적인 사용법은 다음과 같습니다.

history.pushState({}, "", "b.html");

로그인 후 복사

메소드는 URL을 동일한 출처의 URL 값으로 설정합니다. 이후에 전송되는 Ajax 요청의 Referrer 헤더는 이 새로운 값을 사용합니다. 브라우저의 시간 내역 기록에 새로운 내역 기록이 생성됩니다. 그러나 pushState 메소드는 페이지를 새로 고치지 않으며 pushState로 인한 URL 해시 값 변경으로 인해 hashchange 이벤트가 트리거되지 않습니다. pushState가 현재 URL과 정확히 동일한 주소를 설정하는 경우에도 브라우저 기록에 새 레코드가 추가됩니다. history.pushState()

5.history.replaceState

이 방법은

과 기본적으로 동일합니다. 유일한 차이점은 history.pushState처럼 이전 기록을 덮어쓴다는 것입니다. location.replacehistory.pushState 및 History.replaceState에 대한 추가 소개:
http://www.php.cn/

6.window.onpopstate

다음과 같이 전달할 수 있습니다. 코드 브라우저의 popstate 이벤트를 수신하는 양식:

window.addEventListener("popstate",function(event){
    //do something},false);

로그인 후 복사

hashchange 이벤트와 유사하게 popstate는 URL이 변경될 때 트리거됩니다(hashchange는 해시 값이 변경될 때만 트리거됨). replacementState도 popstate 이벤트를 트리거하지 않습니다. popstate 이벤트는 브라우저가 해시 값을 뒤로, 앞으로 또는 다시 쓸 때만 트리거됩니다. URL 재작성으로 인해 페이지 새로 고침(예: URL 쿼리 매개변수 변경 또는 교차 도메인 주소로 직접 이동)이 발생하는 경우 popstate 이벤트가 직접 건너뜁니다.

여기서 코드의 이벤트 함수에 전달된 매개변수 "event"에 유의하세요. 이벤트 매개변수에는 상태 개체가 포함되어 있습니다. 이 상태 개체는 History.pushState 및 History.replaceState 메서드를 호출할 때 전달되는 첫 번째 상태 매개변수입니다. 이 상태 전송 방법을 통해 과거 기록에 대한 특정 처리를 수행할 수 있습니다.

JavaScript가 URL을 작동하는 방법에 대한 자세한 설명(단일 페이지 애플리케이션에서 일반적으로 사용됨)

JavaScript에는 일반 페이지 점프든 단일 페이지 애플리케이션 해시든 브라우저 기록을 작동할 수 있는 다양한 메서드가 있습니다. 값 우리 모두는 특히 단일 페이지 애플리케이션에서 이러한 방법을 자주 다루게 됩니다. 이러한 방법은 페이지 라우팅의 거의 핵심 방법입니다. 이 문서에서는 이러한 방법을 자세히 설명합니다.

1.document.location

location是最有用的BOM对象之一，它提供了与当前窗口中加载的文档有关的信息，还提供了一些导航功能。事实上，location对象既是window对象的属性，又是document对象的属性。换句话说，window.location和document.location是同一个对象。这里推荐大家使用document.location的写法，以适应非浏览器文档环境。
除去为a标签设置的href属性，大家最常用的跳转方式一定就是:window.location.href=”xxx”;实际上，上面这句代码真正执行的是location.assign方法。简而言之，下面三中URL跳转的写法完全等同，都会立即打开新的URL并在浏览器的历史记录中生成一条记录：

document.location.assign("xxx");document.location="xxx";document.location.href="xxx";

로그인 후 복사

需要注意的是，如果通过这种方式跳转的URL与当前URL完全相同，则页面会刷新，但是浏览器历史记录不会新增。

2.location.replace

功能几乎与location.href=”xxx”;完全相同，只有一个区别，location.replace会在浏览器的历史记录中生成一条记录，并替换前一条记录。举个例子，当我们打开“a.html”页面，页面内有如下两行代码：

document.location.href="c.html";document.location.replace("b.html");

로그인 후 복사

浏览器先通过location.href的方式跳转到c.html，接着又使用location.replace跳转到b.html。此时点击浏览器的后退按钮，浏览器会直接返回a.html，因为c.html这条历史记录被replace覆盖了。

3.window.onhashchange

我们可以通过如下代码形式来监听浏览器URL的哈希值变化：

window.addEventListener("hashchange",function(){
    //do something
},false);//以下代码都会触发hashchange事件
document.location.hash="#a=1";document.location.href="b.html#b=1";document.location.replace("c.html#c=1");

로그인 후 복사

当我们通过改写location的方式引起浏览器URL哈希值变化时，hashchange事件就会触发。如果URL重写导致了页面刷新（例如改变了URL查询参数，或者直接跳向一个跨域地址），hashchange事件会直接被跳过。请注意，URL哈希值变化不一定总是会触发hashchange事件，下面要介绍的方法就是改动URL但不触发hashchange。

4. history.pushState

pushState方法接收三个参数：一个记录历史状态的对象（该对象会在popstate事件触发时被传入，有640K的大小限制）；一个代表历史记录标题的字符串；一个与当前URL同源的地址。典型的使用方式如下：

history.pushState({}, "", "b.html");

로그인 후 복사

history.pushState()方法会将URL设置为一个同源URL值，在此之后发送的Ajax请求的Referrer头部都会使用这个新的值，同时在浏览器历史记录中生成一条新的历史记录。但是pushState方法不会刷新页面，pushState引起的URL哈希值变化也不会触发hashchange事件。pushState如果设置了一条与当前URL完全相同的地址，浏览器的历史记录中仍然会新增一条记录。

5.history.replaceState

该方法与history.pushState基本相同，唯一的区别就是replaceState会像location.replace一样覆盖先前历史记录。
关于history.pushState和history.replaceState的更多介绍：
http://www.php.cn/

6.window.onpopstate

我们可以通过如下代码形式来监听浏览器的popstate事件：

window.addEventListener("popstate",function(event){
    //do something},false);

로그인 후 복사

与hashchange事件类似，popstate会在任何URL变化时触发（hashchange只会在哈希值变化时触发），并且history.pushState和history.replaceState也不会触发popstate事件。只有在浏览器后退、前进、重写哈希值的情况下才会触发popstate事件。如果URL重写导致了页面刷新（例如改变了URL查询参数，或者直接跳向一个跨域地址），popstate事件会直接被跳过。
这里请注意一下代码中传给事件函数的参数“event”，event参数中包含state对象，这个state对象就是在调用history.pushState和history.replaceState方法是传入的第一个状态参数，我们可以通过这种状态传递方式来对历史记录进行一定处理。

以上就是详解JavaScript操作URL的方法（单页应用常用）的内容，更多相关内容请关注PHP中文网（www.php.cn）！