라벨이 Web인 게시물 표시

IE8이하 Split Bug

split()함수에 Regex를 사용 시 ""값이 return되지 않는 문제 고객이 네트워크 속도 문제로 인해 필요없는 파일을 load하지 않기로 하였다. 이에 대해서 특정 js파일을 load제외하였는데 그로인해 IE8에서 textsize를 계산할 때 다른점이 발견되었다. 이러한 부분을 조사 중 IE8에서 split()에 정규식 공백문자(" ")를 사용 시 반환되는 배열에 empty string("")값이 제외되는 문제가 발생하였다. String.split() syntax 💡 String.split([separator[, limit]]) separator : 끊을 문자 or 정규식 limit : 몇 개 까지 자를 지에 대한 숫자 만약 " ab c d e fg 123 "와 같은 문자열이 있다고 하자. 이 문자열에 대하여 " " 공백문자를 기준으로 자르고자 한다. 그렇다면 split()함수에 " "공백을 인자로 사용 시 ""을 포함한 배열이 반환 될 것이다. 근데, 만약 정규식을 사용 한다면 어떻게 될까? 보통 정규식을 사용 시 다음과 같이 사용을 할 것이다 💡 var reg = /abc/; var reg = new RegExp("abc"); 두 방식의 차이는 컴파일 시점의 차이로 첫 번째 방식의 경우 스크립트가 load되는 시점에 컴파일 되며 두 번째의 경우는 정규식이 실행되는 시점에 컴파일 된다. 만약, 상수와 같이 고정된 조건에 대해서 사용하는 경우 첫 번째 방식을 사용하며, 조건이 변경되는 경우는 두 번째 방식을 사용하면 될 것이다. 테스트 실행결과의 경우 아래에서 확인 가능하며, 해당 파일은 GitHub 저장소에 업로드되어있다.( 저장소 ) https://angwangho.github.io/sampleFile/window_method/split.html 위 샘플에서 확인하였듯이 spli...

alert 사용 시 브라우저별 script처리 및 event가 다른 현상

alert 사용 시 브라우저별 script 처리 및 event가 다른 현상  window의 내장함수인 alert()을 사용 시 브라우저별로 script 처리 및 event가 다른 현상 문법 window.alert([message]) | alert([message]) message에 경고 대화상자 창에 표시할 텍스트를 입력합니다. 현상 현상 확인의 경우 하단의 링크에서 확인 가능합니다 샘플 링크 mousedown event에서 alert()을 실행 시 브라우저 별 event 발생이 다르며 script 처리 방식에 차이가 존재합니다. IE11, Edge와 같이 OS, 브라우저 버전에 따라 차이가 존재합니다. 브라우저별 확인 결과 크게 3가지로 분류가 가능합니다. event 미발생 : mouseup event가 발생 X chrome, IE11(win7) event 발생 : alert 실행 중 mouseup event가 발생 IE11(win10), Edge(18) Edge(18)의 경우 mouseup event가 발생하나 alert, confirm를 실행 시 해당 동작이 수행되지 않습니다. event block 후 발생 : alert 창이 닫힌 후 event 발생 FireFox 해결방안 실행 시점 변경 alert 발생 시 창이 닫혔는지 알 수 있는 방안이 없으며, 브라우저 별 script처리 및 event 발생 차이가 존재 실행 시점을 mouseup, click event으로 변경하여 호출

window.open()시 width, height값이 설정한 값과 다른 현상

window.open()시 width, height값이 설정한 값과 다른 현상  window의 내장함수인 open()을 사용 시 브라우저별로 값이 다르게 나타나는 현상 문법 window.open( URL, name, specs, replace ) specs에 " width=pixels", "height=pixels"값을 입력하여 크기를 설정 가능합니다. window.resizeTo(aWidth, aHeight) aWidth, aHeight 설정 시 window의 outerWidth, outerHeight값이 설정한 값으로 변경됩니다. 현상 현상 확인의 경우 하단의 링크에서 확인 가능합니다 샘플 링크 최초 확인 시 IE11, Edge, chorme(win10/win8), Opera 브라우저에서 설정한 값과 다르게 크기가 설정되는 것을 확인하였습니다.(2019.11.20기준) window open() 시 window의 innerWidth,innerHight값이 specs에서 설정한 width, height값과 같아야 합니다. window.resizeTo() 함수 사용 시 Edge 브라우저에서 값이 다르게 설정 됩니다. 해결방안 변경 후 값 재보정 얼만큼 잘못된 값이 설정될지는 실행 전 알 수 없습니다. 이에 대하여 설정 된 후 보정을 통하여 원하는 값으로 설정되도록 합니다. resize event에서 설정 값, outer/inner의 차이를 통해 값 보정

마지막 문자가 개행 문자인 경우 무시되는 현상

마지막 문자가 개행문자인 경우 무시되는 현상 현상 HTML Tag의 마지막 문자가 단독으로 존재하는 개행문자인 경우 개행처리를 하지 않음 현상 확인 방법 DOM에 value 직접 셋팅 단독 개행문자(Enter) 단독 개행문자(br Tag) script를 사용하여 innerHTML의 value 변경 script 실행 \n이 마지막으로 변경 \r\n이 마지막으로 변경 br Tag가 마지막으로 변경 해결 방안 개행문자(\n, br tag, etc...)를 하나 더 추가하여 개행처리가 되도록 한다. br Tag 2번 사용 textarea tag를 사용 한다.(단일 개행문자 적용가능) 테스트 환경 IE11, Chrome, FF, Edge, Opera, Safari 기타 innerHTML만이 아닌 textcontent로 개행문자를 적용 시 동일하게 현상 발생.