2016-09-30 6 views
0

다음 시나리오를 통해 페이지를 처음 입력 할 때 "코드"를 입력하거나 을 다른 페이지에서 다시 입력해야합니다..React 구성 요소의 pageshow 이벤트 리스너가 제대로 작동하지 않습니다.

내 페이지를 캐시하고 아무 것도 실행하지 않기 때문에 Safari의 캐시 기능 (https://webkit.org/blog/516/webkit-page-cache-ii-the-unload-event/)이 원인입니다..

이벤트 리스너를 'pageshow'이벤트에 추가 할 것을 권고 한 후,이 방법으로 해당 이벤트가 지속되는지 확인하고 필요한 것을 실행할 수 있습니다.

example 내가 가지고 싶은 것을 기본적으로 ...

  • 첫 페이지에 액세스 할 리스너를 부착 = 쿨, 그 있습니다.
  • 페이지에서 나가서 Safari를 사용하여 돌아 오면 페이지 청취자에게 내 청취자가됩니다. Cool, I have that ... 거의.
  • 그 페이지로 다시 돌아갈 때마다 청취자가 해고되어야합니다. 냉담하지 않습니다. 청취자가 한 번 발동합니다. 내가가) (반응 componentDidMount 사용하고

내가 준비하고있어 모든 :

enter image description here

그것은 내가 밖으로 탐색 할 수있어 .. 처음 작동 내 페이지로 돌아가서 내가 원하는 것을 실행하십시오.

문제는 "내 페이지에서 내비게이션으로 돌아가서"두 번째로 아무것도하지 않을 것입니다. 청취자가 삭제 된 것처럼 보입니다.

감사합니다.

+0

hte componentDidMount가 이미 그렇게하고 있지 않습니까? 그것이 나 였다면 eventListener를 잊어 버렸고 반응 컴포넌트가 componentDidMount에서 처리하도록했습니다. 이 기능은 사용자가 이동하여 다시 돌아올 때마다 구성 요소가 마운트되는 경우 작동합니다. componentDidMount console.log가 사라지고 돌아올 때마다 표시됩니까? – finalfreq

+0

Safari 캐시 때문에 컴포넌트의 라이프 사이클 이벤트 (예 : componentDidMount) 내의 코드가 실행되지 않습니다. 그래서 이벤트 리스너를 부착해야했습니다. –

+0

현재 event.persisted가 true이면 페이지를 다시로드해야합니다. 모든 것을 수행하는 것입니다 (다른 모든 브라우저와 마찬가지로). 그러나 전체 페이지를 다시로드하지 않는 Safari 동작을 유지하고 싶습니다. 그래서 이벤트 리스너를 추가했습니다. –

답변

1

길을 찾으려고 2 일 후 ... 동료가 a listener on 'popstate'을 시도해달라고 요청했습니다. 나는 '페이지 쇼'청취자가 작동하도록 노력하여 그 것을 시험하는 것을 완전히 잊었습니다. 그것은 완벽하게 작동했습니다 :

window.addEventListener('popstate', function(event) { 
관련 문제