safari나 firefox에서 BFCache로 인한 iframe 이벤트 오작동 이슈

이슈 

모바일 웹페이지에서 유튜브 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 인 요소는 동영상이 로딩될때 같이 생성되는, 영상 로딩을 위한 접근자 역할을 한다.

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