length가 1이상일 경우 객체가 존재함을, 0일 경우 존재하지 않음을 의미한다.
if(jQuery("#specialistAnswer").length > 0) {
jQuery("#specialistAnswer").val("Y");
}
| [jQuery] ajax() GET 요청시 IE에서 캐싱되는 문제 해결하기 (0) | 2016.01.22 |
|---|---|
| [jQuery] XSS에 안전한 함수들 (0) | 2015.09.18 |
| [jQuery] datepicker 최대값, 최소값 설정하기 (0) | 2015.09.03 |
IE 브라우저에서는 정말 예외케이스가 많은 것 같다.
IE에서 GET 방식으로 jQuery.ajax() 요청을 할 경우 같은 URL에 대해 캐싱(caching)이 먹어 응답결과가 갱신되어 넘어오지 않는 문제가 있다.
이를 해결하기 위해서 다음과 같은 방법으로 코드를 변경해주면 된다.
1. cache:false 옵션 활용
1) ajaxSetup() 함수로 cache:false 값을 global하게 설정한다.
- 제일 깔끔한 방법. 추천!
- 공통 JSP 등에 아래와 같이 설정을 하게 되면 매번 ajax 호출시마다 설정하는 번거로움을 피할 수 있다.
<script type="text/javascript">
jQuery.ajaxSetup({
cache: false
});
</script>
2) 1회성일 경우 ajax 호출시 cache:false값을 설정해주면 된다.
<script type="text/javascript">
jQuery.ajax({
url:"http://www.naver.com",
cache: false,
dataType: "json",
success: function (result) {},
error: function () {}
});
</script>
2. new Date()로 URL에 TIMESTAMP값 추가하기
- 다른 URL로 인식할 수 있도록 가변적인 TIMESTAMP값을 넣어준다.
<script type="text/javascript">
jQuery.ajax({
url:"http://www.naver.com?t=" + new Date().getTime(),
dataType: "json",
success: function (result) {},
error: function () {}
});
</script>
| [jQuery] 객체 존재여부 확인하기 (0) | 2016.08.11 |
|---|---|
| [jQuery] XSS에 안전한 함수들 (0) | 2015.09.18 |
| [jQuery] datepicker 최대값, 최소값 설정하기 (0) | 2015.09.03 |
제이쿼리 함수중 html(), append() 등을 통해 HTML에 값을 설정할 경우 XSS에 대해 주의하여야 한다.
아래의 코드는 XSS 공격에 취약하다.
html() 함수는 XSS 공격에 대해 unsafe하기 때문이다.
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function test() {
var xss = "<script>alert(1);</script>";
jQuery("#testDiv").html(xss);
}
</script>
</head>
<body>
<div id="testDiv"></div>
<a href="#" onclick="test(); return false;">test</a>
</body>
</html>
XSS에 대해 안전하지 못한 제이쿼리 함수는 다음과 같다.
반면, XSS 공격에 대해 안전하게 사용할 수 있는 함수 역시 존재한다.
참고문헌
- https://coderwall.com/p/h5lqla/safe-vs-unsafe-jquery-methods
| [jQuery] 객체 존재여부 확인하기 (0) | 2016.08.11 |
|---|---|
| [jQuery] ajax() GET 요청시 IE에서 캐싱되는 문제 해결하기 (0) | 2016.01.22 |
| [jQuery] datepicker 최대값, 최소값 설정하기 (0) | 2015.09.03 |
여지껏 웹개발을 할 때, 자바스트립트의 마임타입으로 text/javascript를 사용하였다.
그런데 프로젝트 중 다른 동료가 application/javascript로 쓴 것을 보고 ,
"이건 뭐지?"
"최근엔 자바스크립트 타입을 이렇게 써요"
해서 무작정 따라 썼었는데, 제대로 안알아보고 쓰다보니 결국 문제 발생! ㅎㅎㅎ
차이점은 다음과 같다.
1. text/javascript
- HTML 4.01 (1999) 스펙
- http://www.w3.org/TR/1999/REC-html401-19991224/interact/scripts.html#h-18.2.2.2
- HTML4, HTML5 지원
- Obsolete.
2. application/javascript
- RFC 4329 (2006) 스펙
- HTML5 지원
- Now Recommended.
이렇게 보면 application/javascript가 최신 스펙이니 최신걸로 사용해야겠라 생각할 수 있다.
문제는 서비스에서 지원하는 브라우저의 범위이다.
application/javascript를 사용할 경우에는 IE8 이하는 지원이 되지 않는다.
따라서,
서비스를 개발할 때 IE 하위호환까지 고려를 해야되는 웹사이트라면 application/javascript는 문제가 되며,
(const 키워드가 먹히지 않았으며, 변수 등을 찾지 못하는 등 정상적인 스크립트 기능이 되지 않았다.)
이 경우는 text/javascript를 추천한다.
참고문헌
- http://stackoverflow.com/questions/21098865/text-javascript-vs-application-javascript
| IE11에서 같은 이름을 줘도 팝업창이 계속 새창으로 열리는 문제 (0) | 2015.09.07 |
|---|---|
| 이벤트 캡쳐링(event capturing) (0) | 2015.01.22 |
| 이벤트 버블링(event bubbling) (0) | 2015.01.21 |
특정 IE11에서 window.popup()에 이름을 줘서 팝업을 띄워도 계속 새창으로 뜨게 되는 이슈가 있다.
IE11 버그인 것 같음
정상적인 케이스는 팝업에 같은 이름을 줄 경우 계속 띄워진 팝업에서만 화면전환이 일어나야 한다.
하지만 윈도우OS 버전 or 윈도우 업데이트 버전에 따라 해당이슈가 발생하는 것 같으며 정확한 재현 케이스는 아직 잘 모르겠다.
이 문제를 해결하기 위해서는 다음과 같이 윈도우 객체를 변수로 관리하면 팝업을 유지할 수 있다.
<script type="text/javascript"> var myWindow = null; function newPopup() { if (!myWindow || (myWindow && myWindow.closed)) { myWindow = window.open("http://localhost:8080", "_popup", "width=300px,height=300px,scrollbars=no"); } } </script>
만약 같은 팝업을 각각 다른 페이지에서 띄울경우엔 myWindow 변수가 같이 유지되지 못하기 때문에 새창으로 뜨게 되는 단점은 존재하긴 한다.
| text/javascript와 application/javascript의 차이점 (0) | 2015.09.08 |
|---|---|
| 이벤트 캡쳐링(event capturing) (0) | 2015.01.22 |
| 이벤트 버블링(event bubbling) (0) | 2015.01.21 |
제이쿼리 캘린더를 사용할 경우 특정기간 이후 또는 특정기간 이내까지를 설정해야 될 경우가 있다.
(오늘부터 1주일내, 1달이내 등..)
datepicker 함수를 통해 초기화 할때 아래와 같이 설정하면 된다.
jQuery(document).ready(function () {
var minDate = new Date();
var maxDate = new Date();
var dd = maxDate.getDate() + 7;
maxDate.setDate(dd);
jQuery("#startDate").datepicker({
minDate : minDate,
maxDate : maxDate
});
});
옵션을 통해서 아래와 같이 추가설정도 가능하다.
가령, 공통으로 설정된 캘린더가 include 되어있는 상태이고, 특정 화면에서만 날짜제한을 주고 싶을 때 아래와 같이 사용할 수 있다.
jQuery(document).ready(function () {
var minDate = new Date();
jQuery("#startDate").datepicker("option", "minDate", minDate);
});
| [jQuery] 객체 존재여부 확인하기 (0) | 2016.08.11 |
|---|---|
| [jQuery] ajax() GET 요청시 IE에서 캐싱되는 문제 해결하기 (0) | 2016.01.22 |
| [jQuery] XSS에 안전한 함수들 (0) | 2015.09.18 |
이벤트 버블링과 반대되는 개념으로서,
이벤트가 상위노드에서 하위노드로 전파되어 실행된다.
(※ 캡쳐링의 경우는 IE9 이전 버전에서는 지원하지 않는다.)
이고잉님 생활코딩 강의에 너무 잘 설명되어 있어서 링크로 대신한다.
| text/javascript와 application/javascript의 차이점 (0) | 2015.09.08 |
|---|---|
| IE11에서 같은 이름을 줘도 팝업창이 계속 새창으로 열리는 문제 (0) | 2015.09.07 |
| 이벤트 버블링(event bubbling) (0) | 2015.01.21 |
스크립트 이벤트 순서가 자식노드에서부터 상위 부모노드로 올라가면서 연속적으로 실행되는 것을 말한다.
<html> <head> <style type="text/css"> .parent {width:300px; height:300px; background-color:red;} .child {width:150px; height:150px; background-color:yellow;} </style> <script type="text/javascript"> function parent(){ alert("parent clicked"); } function child(){ alert("child clicked"); } </script> </head> <body> <div onclick="parent();" class="parent"> <div onclick="child();" class="child"></div> </div> </body> </html>
위 코드를 실행하면 나오게 되는 화면이다.
부모 <div>와 자식 <div>가 겹쳐지는 부분인 노란색 영역을 클릭하게 되면 "child clicked" 얼럿이 뜨고 나서 "parent clicked" 얼럿이 뜨게 된다.
이것을 막기 위해선 event 속성의 cancleBubble값을 true로 설정하여야 한다.
function child(){ alert("child clicked"); event.cancelBubble = true; }
또는 jQuery를 통해서 다음과 같이 처리할 수도 있다.
jQuery(".child").click(function(e){ e.stopPropagation(); });
| text/javascript와 application/javascript의 차이점 (0) | 2015.09.08 |
|---|---|
| IE11에서 같은 이름을 줘도 팝업창이 계속 새창으로 열리는 문제 (0) | 2015.09.07 |
| 이벤트 캡쳐링(event capturing) (0) | 2015.01.22 |
|
