IT 기록

pageshow 와 pagehide이벤트를 위한 이벤트 객체 

브라우저는 문서를 처음 로드할 때 load 이벤트 다음에 pageshow 이벤트를 발생 시키며, 

문서를 벗어날 때는 pagehide 이벤트를 발생시킨다. 

pageshow와 pagehide 이벤트는 window 객체에서 발생하며,

PageTransitionEvent 객체는 두 이벤트와 조합된다. 

pageshow와 pagehide는 버블링되지 않고, 취소 가능한 기본 동작도 존재하지 않는다.

(크롬에서 pageshow, pagehide는 디버깅이 안타지던데 이 때문인가..)

해당 이벤트 객체의 persisted 프로퍼티의 값은 페이지가 로드 또는 새로고침이 아니라 복원되었을 경우에 true이다.

페이지가 네트워크 또는 디스크 캐시로부터 로드 또는 새로고침 될 때는 false의 값을 가진다.

persisted 프로퍼티는  pagehide에선 항상 true이고, pageshow에서만 true/false의 값을 가진다.

load

- 문서와 해당 문서의 외부 리소스들이 모두 로드되었을 때

pagehide

- 페이지가 캐시되어 있으며 다른 페이지에 의해 교체되었을 때

pageshow

- 페이지가 처음 로드되면 load이벤트 직후에 pageshow이벤트가 발생한다. 해당 이벤트에는 persisted 값이 false이지만, 페이지가 브라우저의 메모리 캐시로부터 복구되었다면 load이벤트가 발생하지 않으며(캐시된 페이지가 이미 loaded상태이기 때문), persisted 프로퍼티 값이 true로 설정된 이벤트객체와 함께 pageshow 이벤트가 발생한다.

unload

- 브라우저가 페이지로부터 다른 곳으로 벗어날 때. 페이지의 onunload 핸들러를 등록하면, 페이지가 캐시되지 않는다는 사실에 주의하자. 사용자가 새로고침엇ㅂ이 빠르게 현재 페이지로 되돌아오게 하려면, onpagehide를 대신 사용하는 편이 낫다.

출처 : 자바스크립트 완벽 가이드 / 데이비드 플레너건 

이슈 

모바일 웹페이지에서 유튜브 iframe API를 이용하여 동영상을 노출시키고 테스트 도중,

Safari에서만 history back(뒤로가기) 시, 영상이 자동으로 음소거 되어 연속 재생되는 이슈가 발견되었다.

한 번 그런 현상이 재현되면 페이지를 reload하기 전까지 볼륨 조절버튼이나

음소거 on/off버튼도 먹통이 되기 때문에, major급 이슈였고 해결하는데 꽤나 많은 시간이 소요되었다..

BFCache

 브라우저에서 뒤로가기 시, 크롬을 제외한 브라우저에서는 BFCache 기능을 제공한다. 

이전 화면으로 재이동 시 페이지를 좀 더 빠르게 보여주기 위한 기능으로 

html파싱이나 페이지를 구성하는 동작 자체를 생략하기 위해 html, css뿐만아니라 javascript의 상태까지 저장했다가 다시 불러오는 기술이다. 

해결

history.back시 iframe 영상이 음소거된 상태로 재생되는 이슈를 해결하기 위해 

'pageshow'나 'onload', 'pagehide' 등의 이벤트들을 이것 저것 사용해 보았지만,

많은 블로그들에서 해결 방법으로 나와있던 pageshow 이벤트 조차 간헐적으로 타는 것이었다. 

그런데 'popstate'이벤트를 걸어보니 항상 타는 것이 확인되어,

이벤트가 탈 때 영상 요소를 remove시키고,

재 로딩시키는 방법으로 스크립트를 수정하여 이슈를 해결하였다.

 위 소스는 video_area 클래스를 가진 요소 하위에 'youtube_vod' 를 id로 가지는 요소를 생성하면서 youtube 동영상을 로딩시키는 부분이다.

id가 youtube_vod 인 요소는 동영상이 로딩될때 같이 생성되는, 영상 로딩을 위한 접근자 역할을 한다.

접근자를 이용하여 영상을 재 로딩시키는 부분을 확인할 수 있다.