[크로스브라우징] chrome과 safari 브라우저의 호환성 이슈

크로스브라우징 테스트에서 Safari 브라우저의 호환성 확인 및 조치

 

location.reload

 

windows에서는 location.reload를 화면 새로고침으로 인식하지만 safari에서는 url클릭 + enter로 인식

쿼리스트링을 포함한 get방식이라면 상관없으나 백단을 통해 데이터를 주고 받는 경우라면 location.reload 사용시 데이터가 유실되는 문제 발생

 

🟥 : 등록된 파일을 삭제하면 바로 ajax로 DB에 저장된 파일을 지우고 페이지를 reload. 페이지가 다시 load되면 서버에서 넘겨받은 데이터가 유실되어 세팅되지 않는 이슈 발생

 

🟨..? :

해결방법을 못찾아서 그냥 목록으로 화면 전환을 시켜버렸는데.. 방법 좀 알려주세요 ..

 

window.history.back

 

사파리,파이어폭스(Safari, Flrefox) 브라우저에서는 동일 세션에서 이전 페이지를 빠르게 로딩하기 위하여 BFCache( Back-Foward-Cache ) 기능을 이용하여 이전에 저장한(캐싱) 데이터를 바로 로드하고 있음

이 때, 서버단에서 데이터 처리 및 화면 구성이 끝나는 페이지이 경우는 상관없지만

window.onload 나 $(document).ready() 단계에서 ajax로 데이터를 조회하는 로직이 있는 경우에 이슈가 될 수 있음

 

🟩 :

//Javascript
window.onpageshow =  function(event) { // BFCahe
	if (event.persisted) {
		window.location.reload();
	}
}

//Jquery
$(window).bind("pageshow", function(event) {
	if ( event.originalEvent && event.originalEvent.persisted) { // BFCahe
		window.location.reload();
	}
});

→ 페이지가 캐시되었을 때 강제로 새로고침

 

onload : 페이지가 캐시에서 로드될 때는 발생하지 않음

onpageshow : 페이지가 로드될 때 무조건 발생

persisted : 페이지가 캐시되었을 경우 true, 아닌 경우 false를 반환

 

$().clone()

clone 자체는 정상작동. 하지만 input[type='file']인 경우 등록된 파일이 복제되지 않음

 

🟥 :

form에 row를 추가하여 각각의 row에 파일을 등록하고자 함
팝업에서 row를 추가하여 다중 파일을 등록하고 저장 버튼을 누르면 저장할 준비 완료

(X 버튼을 누르면 등록되거나 변경된 파일을 이전으로 복구)

 

이를 위해 팝업에서 저장 버튼을 누르면 display : none으로 팝업에 등록된 파일을 복제하여 form에 넣어주고

form에서 열기 버튼을 누르면 form 안에 등록된 파일을 팝업안에 채워줌

 

🟩 :

// div를 통으로 복제할 것이기 때문에 일단 clone해주기
var tx = $('#modalFilePop').find('.modal-body').find('.filediv').clone();

$('#procTable > tbody > tr:eq('+tableIdx+')').find('.pre-parent').html(tx);

// safari 브라우저인지 체크
var isSafari = /^((?!chrome|android).)*safari/i.test(navigator.userAgent);

if (isSafari) {
	//팝업에 등록된 파일 전체
	var popupFile = $('#modalFilePop').find('.modal-body').find('.filediv').find('input[name=fileInfo]');

    var i = 0;
    if(popupFile.length > 0){
        const fileform = Array.from(popupFile);
        Array.from(fileform)
            .forEach(file => {
				// 같은 name을 가진 input이 여러개이므로 배열로 접근
            	$('#procTable > tbody > tr:eq('+tableIdx+')').find('.pre-parent').find("input[name=fileInfo]")[i].files = file.files;
                i++;
        });
    }
}

개별 파일을 꺼내 해당 row에 등록 file을 수동으로 넣어줌

동일한 방식으로 form 의 file 데이터를 팝업에 수동으로 넣어줌

 

tableIdx : 팝업에 등록된 파일을 넣어줄 row number

files : input태그로 선택한 파일의 목록 조회 가능

 

브라우저 체크

navigator.userAgent : 브라우저 정보를 검사

 

safari 확인 정규식 : */^((?!chrome|android).)safari/i

  →  "chrome" 또는 "android"이라는 문자열이 포함되지 않은 경우에만 "safari"라는 문자열을 포함하는지 검사

 

크롬의 경우 navigator.userAgent로 출력시에 safari 가 같이 표시되기 때문

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36