2012-06-16 5 views
-1

브라우저 기록을 조작하여 Ajax 호출에 적합한 URL을 표시하는 HTML5 응용 프로그램이 있습니다. 이것은 훌륭하게 작동하지만 내 응용 프로그램이 외부 사이트에 대한 하이퍼 링크를 가지고있을 때 문제가 발생합니다 (예 : http://www.google.com). 이 경우 역사는 다음과 같습니다HTML5 기록, 뒤로 버튼 및 외부 링크

내 앱 페이지 A -> 내 앱 페이지 B ->

사용자가 한 번 뒤로 버튼을 명중 할 때, 모든 것이 괜찮 구글

. 내 응용 프로그램 페이지 B가 표시됩니다.

그러나 사용자가 뒤로 버튼을 다시 누르면 URL은 변경되지만 페이지는 변경되지 않습니다. onpopstate 핸들러가 호출되지 않았기 때문에 내 앱 페이지 A에 대한 상태를 표시하기 위해 적절한 Ajax 호출을 수행 할 수 없습니다. 이는 브라우저가 내 앱 페이지 B로 돌아 갔을 때 처리기가 초기화되지 않았기 때문입니다 (처리기를 다시 초기화 할 수 없기 때문에 처리기를 다시 초기화 할 수 없습니다.)

이 경험은 Chrome에서 사용되었지만 Chrome과 관련이 있다고 판단 할 이유가 없습니다. 이 문제를 해결할 방법이 있습니까?

Gmail과 같은 응용 프로그램이 새 창에서 모든 외부 하이퍼 링크를 엽니 다. 하지만 내 신청서에 대한 요구 사항으로는 그렇게 할 수 없습니다.

+1

popstate 처리기 외에도 onload 처리기를 사용해야하며 일부 언로드 처리기가 필요할 수도 있습니다 (http://stackoverflow.com/questions/158319/cross-browser-onload-event-and-the- 뒤로 버튼)을 눌러 브라우저 캐시를 끊습니다. – user123444555621

+0

'onpopstate'가 호출되지 않은 이유를 이해할 수 없습니다. 사용자가 위치를 변경할 때마다 호출되어야합니다. –

답변

1

@ Pumbaa80이 제공하는 링크는 정확한 답변을 제공합니다.

페이지에 <body onunload="">을 넣으면 Chrome 및 다른 브라우저에서 bfcache가 깨집니다. 즉, 뒤로 버튼을 클릭하여 Google의 내 애플리케이션 페이지 B로 돌아 가면 모든 페이지 상태 JavaScript 이벤트가 실행됩니다.

Google에서 돌아온 후에 내 앱 페이지 B에서 호출되도록 onpopstate를 얻을 수있는 방법이 없습니다. (이 버튼은 뒤로 버튼을 쳤던 페이지에서만 해당 이벤트가 발생하기 때문에 비현실적입니다.) 내 앱 페이지 B가로드 될 때 논리를 실행하는 방법이 있습니다. 위에서 설명한대로 bfcache를 깨면 jQuery dom ready가 실행됩니다. jQuery dom 준비 콜백에서 onpopstate와 비슷한 코드를 실행하여 History 페이지에 저장된 데이터에 액세스하여 외부 페이지에서 돌아온 후 HTML5 웹 앱의 상태를 재설정 할 수 있습니다.

0

페이지의 상태를 저장하기 위해 해쉬 태그를 사용해야한다고 생각합니다.이 방법에 대해서는 알지 못합니다. 나는 과거에 큰 성공을 거두며 this jQuery plugin을 사용했고, 매우 세련된 이름은 BBQ (Back Button & Query library)입니다. 이렇게하면 페이지의 URL 해시 태그를 기반으로 작업을 수행 할 수 있습니다.

+0

HTML5의 pushState가 상태를 저장할 수 있는지 알지 못하는 것 같습니다. https://developer.mozilla.org/en/DOM/Manipulating_the_browser_history#The_pushState().C2.A0method –

+0

@Derek : 멋지게 보입니다. 머리 위로, 확실히 그것을 미래에 사용할 것이다. 그러나 IE9 이상이 부족하여 최적의 트래픽을 제공하지 못하는 것으로 나타났습니다. Ref : http://caniuse.com/#search=pushState - 내 솔루션은 적어도 대체 역할을 할 수 있습니다. – ohaal