IT 기록

기존 소스상 beforeunload 이벤트를 이용해 web에서 이전 화면으로 이동 시, 스크롤 유지를 시키고 있었다. 

그런데 왠걸 IOS web(safari)에선 스크롤 유지가 되지 않고, history back 시 계속 페이지가 리로딩되며 이전에 보고있던 스크롤 위치를 유지하지 못하고 스크롤이 최상단으로 올라가는 현상이 발생. 

검색해보니 beforeunload 이벤트 자체를 IOS safari에선 지원해주지 않는 것이였다.

아래 MDN에서도 아예 IOS safari는 지원이 되지 않는다고 명시되어 있다.

참고URL: developer.mozilla.org/en-US/docs/Web/API/Window/beforeunload_event

기존 AOS 의 경우 페이지를 벗어나려고 할 때, beforeunload 이벤트에서 스크롤 위치값을 sessionStorage에 저장시켰다가, 로딩 콜백함수에서 sessionStorage에 담은 값을 되찾아 스크롤을 위치시켜 왔다.

IOS safari에서도 동일한 기능 적용을 위해 여러 검색과 시도 결과 

'pagehide'라는 이벤트가 정상 작동하는 것을 알게되었다.

window.addEventListener('pagehide', function(e){
	sessionStorage.setItem('historyScrollTop' , document.documentElement.scrollTop);
});

document.documentElement.scrollTop //  현재 스크롤 위치를 가져오며 모든 브라우저에서 지원.

업무 중 이벤트 이미지를 특정 일자까지만 노출시키고 이후로는 비노출 시키기위해 new Date 함수를 이용하여 

조건문을 만들었다. 

그런데 PC의 크롬과 안드로이드에선 정상적으로 동작하는데,

아이폰 사파리나 크롬에서는 동작하지 않는 것이였다. 

당시 내가 구현했던 소스는

var exDate= new Date('2020/07/12/23:59:59'); // 2020년 7월 12일 23:59:59
var currDate = new Date();

if(exDate > currDate) {
...
}

위와 같다. 

디버깅 결과, 아이폰에서 exDate가 invalid Date 로 확인되고 있었다.

크로스 브라우징 이슈였고, 구글링 결과 moment.js라는 외부 라이브러리를 이용하면 해결 가능하다는 글들이 꽤 많았으나 표준 표기법을 이용하니 정상 인식되었다. 

표준 표기법은 아래와 같다. 

var exDate = new Date(2020,06,12,23,59,59); // 2020년 7월 12일 23:59:59

월 표기시 -1하여 사용해야 한다는것에 주의가 필요하다. 

이슈 

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

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