WindowEventHandlers.onhashchange

WindowEventHandlers 믹스인의 WindowEventHandlers.onhashchange 속성은

hashchange 이벤트를 처리하기 위한 event handler 입니다.

hashchange 이벤트는 윈도우의 해시가 변경되면 시작됩니다. ( Window.location (en-US) 및 HTMLHyperlinkElementUtils.hash (en-US) 참조)

문법

event handler:

js

window.onhashchange = funcRef;

HTML event handler:

html

<body onhashchange="funcRef();"></body>

event listener:

addEventListener()를 사용하여 이벤트 리스너 추가하기

js

window.addEventListener("hashchange", funcRef, false);

매개변수

funcRef

함수에 대한 참조.

예제

event handler 사용하기

This example uses an event handler (window.onhashchange) to check the new hash value whenever it changes. If it equals #cool-feature, the script logs a message to the console.

js

function locationHashChanged() {
  if (location.hash === "#cool-feature") {
    console.log("You're visiting a cool feature!");
  }
}

window.onhashchange = locationHashChanged;

Using an event listener

이 예제는 이벤트 리스너를 사용하여 해시가 변경 될 때마다 콘솔에 알림표시합니다.

js

function hashHandler() {
  console.log("The hash has changed!");
}

window.addEventListener("hashchange", hashHandler, false);

Overriding the hash

이 함수는 새로운 해시를 동적으로 설정하여 임의로 두 값 중 하나로 설정합니다.

js

function changeHash() {
  location.hash = Math.random() > 0.5 ? "location1" : "location2";
}

hashchange 이벤트

hashchange 이벤트에는 다음과 같은 필드가 있습니다:

Field Type Description
newURL DOMString 탐색할 새로운 URL입니다.
oldURL DOMString 탐색했던 이전의 URL입니다.

제2의 해결책을 위한 event.newURL 와 event.oldURL

js

//let this snippet run before your hashchange event binding code
if (!window.HashChangeEvent)
  (function () {
    var lastURL = document.URL;
    window.addEventListener("hashchange", function (event) {
      Object.defineProperty(event, "oldURL", {
        enumerable: true,
        configurable: true,
        value: lastURL,
      });
      Object.defineProperty(event, "newURL", {
        enumerable: true,
        configurable: true,
        value: document.URL,
      });
      lastURL = document.URL;
    });
  })();

명세

Specification
HTML Standard
# event-hashchange
HTML Standard
# handler-window-onhashchange

브라우저 호환성

BCD tables only load in the browser

See also