2013-08-25 3 views
5

"URL 변경 전"이벤트에 리스너를 추가하여 이전 URL에 액세스하려고합니다. 페이지가 다시로드되지 않으면 window.onbeforeunload이 실행되지 않습니다 (AJAX 기반 페이지).URL 변경 감지 (창 언로드 제외)

이것은 예를 들어 오른쪽 탐색 열의 다른 비디오를 클릭하면 YouTube 비디오 페이지에서 발생합니다.

나는 window.location을 투표 한 this post으로 읽었습니다. 그러나 이것은 이전 URL을 캡처하지 않습니다.

이것은 Chrome 확장 프로그램입니다. 내가 자바 스크립트에서 URL을 변경하기 전에 감지하는 방법을 찾고 있어요.

+1

[History API] (https://developer.mozilla.org/en-US/docs/Web/API/window.history)를 사용하십시오. – Joseph

+0

로컬 저장소를 검색해보십시오. –

+0

History API와 결합 된 beforeunload 이벤트를 찾고있을 수도 있습니다. –

답변

2

Chrome 확장 프로그램을 작성하는 경우 탭 URL이 변경되면 실행되는 onUpdated 이벤트를 수신 할 수 있습니다. 자세한 내용은 여기 https://developer.chrome.com/extensions/tabs.html#event-onUpdated.

+0

나는 onUpdate 탭을 알고있다. 그러나 URL이 업데이트되면 백그라운드 스크립트로만 검색 할 수 있습니다. 나는 콘텐츠 스크립트에서 감지 할 수있는 방법을 찾고 있지만 이전 URL에는 여전히 액세스 할 수 있습니다. –

+2

그러면 질문에서 언급 한 것처럼'window.location' 폴링 방법을 사용할 수 있습니다. 이전 url에 액세스하려면 전역 변수로 저장하거나 localStorage에 저장하십시오. Youtube는 History API를 사용하므로 다른 동영상으로 이동할 때 콘텐츠 스크립트를 다시로드하지 않습니다. –

+1

놀랍게도이 작업을 수행하는 더 쉬운 방법은 없습니다. –

4

history API (대부분 YouTube 포함)를 사용하는 AJAX 기반 페이지의 경우 history.pushState으로 연결할 수 있습니다.

Chrome의 경우 이전 URL은 spf-referer 속성에 있습니다. (pushState도 발사하는 동안 또한, location.href은 여전히 ​​이전 URL로 설정됩니다.)

그래서 같은 코드가 작동합니다 :

var H    = window.history; 
var oldPushState = H.pushState; 
H.pushState   = function (state) { 
    if (typeof H.onpushstate == "function") { 
     H.onpushstate ({state: state}); 
    } 
    return oldPushState.apply (H, arguments); 
} 
window.onpopstate = history.onpushstate = function (evt) { 
    console.log ("Old URL: ", evt.state["spf-referer"]); 
} 

주, 당신은 무시해야하기 때문에 대상 페이지의 pushState 기능을 사용하려면 콘텐츠 스크립트의 inject이 코드를 사용해야합니다.