javascript17 iframe에서 parent 페이지 접근을 위해서는 document.domain 필요 jquery_191_min.js:4 Uncaught SecurityError: Failed to read the 'contentDocument' property from 'HTMLIFrameElement': Blocked a frame with origin "http://a.test.com" from accessing a frame with origin "http://a.test.com". The frame requesting access set "document.domain" to "test.com", but the frame being accessed did not. Both must set "document.domain" to the same value to allow access. iframe 에.. 2016. 8. 29. 문제를 통해 이해해보는 Javascript 기본 원리 회사에서 자바스크립트 강의를 듣고난 후 많은 것을 알게 되어 이곳에 정리한다. { var foo = 1; console.log(foo); } console.log(foo); 위의 코드를 실행하면 어떤 값이 찍힐까? 결과는1 1 1 이렇게 두 번 찍힌다. 블럭안에 있는 foo 변수를 블럭 밖에서 사용하지 못할 것으로 예상되지만 Javascript에서 위의 블럭은 아무런 의미가 없다. function bar() { var foo = 2; console.log(foo); } bar(); console.log(foo); { } 블럭은 아무런 의미가 없다고 했는데 function() { } 블럭은 어떨까? 위의 코드를 실행하면 다음과 같이 출력된다. 2 Uncaught ReferenceError: foo is n.. 2016. 7. 29. iframe사이트와 parent사이트간 메세지 전송 방법 (서로 도메인이 다른 경우) 부모 페이지와 iframe의 도메인이 서로 다르다면 보안상의 이유로 통신을 할 수 없다.통신을 할 수 없다는 의미는 window.parent와 같이 부모창의 DOM에 접근할 수 없다는 것이다.however, for security reasons, the parent page could not communicate with the child Iframe, nor could the child communicate with the parent. 허나, postMessage를 이용하면 parent -> child 또는 child -> parent로의 메세지 전송을 할 수 있다.child -> parent 로의 메세지 전송 방법에 대해서 알아보면 다음과 같다. 1. parent 페이지가 로딩된다. 2. paren.. 2015. 5. 21. javascript self closing 문제 다음과 같이 self closing을 사용하여 외부 자바스크립트를 불러오게 되면 문제가 발생한다.문제라 함은 브라우저에서 해당 외부 자바스크립트의 함수를 호출하지 못하는 것.self closing이란 와 같은 문법을 말한다. Start tag는 존재하지만 End tag는 존재하지 않는 것이다. 여하튼 개발을 하다 이와 같은 문제를 겪게 되었고 왜 브라우저가 정상적으로 자바스크립트를 로딩하지 못하는지에 대해서 확인을 해보았다. self closing 은 원래 XHTML 에서 사용하는 문법이라고 하며 다음과 같이 엘리먼트를 꼭 slash를 이용하여 self-closing해야 한다고 적혀 있다.XHTML requires that tags like and get an extra slash to make them.. 2014. 4. 16. 크롬 개발자 도구 - Console view에서의 search 기능 웹 애플리케이션의 view를 개발하다 보면 html 코드 안에서 javascript를 호출하는 function이 jsp 파일에 있는 것이 아닌 외부 js 파일에 존재하는 경우가 있다.만약 호출되는 함수가 어떤 파일에 있는지를 안다면 바로 확인을 할 수 있겠지만 그게 아니라면 이클립스에서 문자열 검색을 통하여 사용하는 function이 어떤 파일에 존재하는지를 찾아야 할 것이다.허나 이와 같이 javascript의 function을 찾아나가는 것은 손가락이 아프고 귀찮은 일이다.이럴때 크롬 개발자 도구를 사용하면 쉽게 function을 찾을 수 있다. 먼저 크롬 브라우저에서 화면을 띄우자.그런 후 테스트 하고자 하는 웹 페이지를 접속한 후 F12 키를 누른다.Developer Tools 창이 뜨면 아래 빨.. 2014. 3. 24. jquery는 JSON.parse()를 사용한다. 다음의 코드는 서버로 HTTP request를 날린 후 response로 JSON데이터를 받아 alert를 찍어주는 부분이다.$.ajax({type : "GET",url : "${pageContext.request.contextPath}/json.do",dataType : "json",data : "adsId=" + adsId + "&cmd=" + cmd,success : function(json) { if (json.isSuccess) { alert(json.msg); } alert(json.info.adsName); alert(json.info.imp); alert(json.info.click);}, error : function(e) { alert("처리중 장애가 발생하였습니다."); } });서버.. 2013. 10. 18. 자바스크립트 inline? external? 자바스크립트는 HTML 코드 inline이 좋을까 external이 좋을까?기존 방식은 공통으로 자바스크립트 함수에 대해서 external로 빼고, 화면단마다 사용하는 자바스크립트는 jsp 안에 포함시키는 방식으로 개발을 진행하였다.헌데 이렇게 하면 jsp 내부에 포함되어 있는 자바스크립트 테스트가 쉽지 않다.크롬이나 파이어폭스에서 breakpoint를 이용하여 디버깅을 지원하고 있지만 내가 테스트 하고자 하는 function을 찾는 것도 힘들다.결국 alert나 console.log를 이용하여 구식의 방법으로 디버깅을 하곤 하는데 과연 이런 방법이 좋은 것일까?당연히 좋지 않은 방법이다.alert 코드를 삭제하지 않은 상태로 라이브 서버에 배포가 될 수도 있고, 노가다가 심하다. 내 생각에는 jsp 코.. 2013. 10. 17. jquery를 이용한 jsonp 처리 방법 test.co.kr 이라는 사이트에서 dev.co.kr 이라는 사이트에 있는 정보를 Ajax 기술을 이용하여 요청을 보낼 때 cross domain policy에 의해 브라우저가 요청을 막는다.즉, 도메인이 다르면 요청을 보낼 수 없다. 위와 같은 상황을 우회하여 해결할 수 있는 방법은 jquery에서 jsonp를 이용하는 것이다.한 가지 주의해야 할점은 jsonp는 HTTP GET 방식만 지원한다. jsp 파일 $(document).ready(function() { }); function getJsonTest1() { $.getJSON("http://jsonp.localhost:8081/jsonpTest?id=user&callback=?", function(data) { alert(data.id + ".. 2013. 7. 11. ajax HTTP, HTTPS에 따른 크로스 도메인 문제 사용자 개인 정보를 서버에 전송할 때 HTTPS로 적용해 달라는 요청이 들어온 적이 있었다.그래서 주민등록번호나 회원 아이디, 패스워드 등을 서버로 전송하는 페이지에 한해서 HTTPS로 적용되게 URL을 변경하였다. 헌데, 다음과 같은 문제가 발생하였다.1. 회원 약관 페이지 접근 http://test.co.kr/userAgreement.do2. 약관 페이지에서 회원 정보 입력 페이지 이동 https://test.co.kr/userReg.do3. 회원 정보 입력 페이지에서 휴대폰 인증 버튼 클릭 시 ajax로 http://test.co.kr/userAuthMobilePhone.do 요청 위와 같이 휴대폰 인증 버튼 클릭 시 서버로 요청을 보내지도 못하고, ajax 에러 메시지가 출력된다.error, No.. 2013. 2. 5. 화면 입력, 수정, 상세 보기 페이지 개발 방법 화면 입력, 수정, 상세 보기 페이지를 개발할 때 다음과 같이 두 가지 방법을 생각해 볼 수 있다. 첫 째는 insert.jsp, update.jsp, detail.jsp 세 개의 파일을 생성하여 각각의 화면 구성을 file 단위로 분리하는 것이고 둘 째는 memberInfo.jsp 와 같이 하나의 파일에 if(flag)와 같은 조건문을 추가하여 분리하는 것이다. 하지만 위의 두 가지 방법은 큰 문제가 있다. 코드의 중복이 발생하고, 당장은 개발이 편하고 고민할 거리가 없다고 생각하겠지만 이후 유지보수에 상당한 비용이 발생하게 되기 때문이다. 그럼 어떻게 하면 코드의 중복이 발생하지 않고, 유지보수의 어려움을 최소화 할 수 있을까? 나의 생각은 다음과 같다. 회원 가입 페이지 접근 시 memberInfo.. 2012. 11. 22. html table merge 간혹 아래와 같이 html table을 merge한 후 화면에 보여줘야 하는 경우가 있다. 전에는 for문 돌리며 if 처리를 통해 해결했는데 다음과 같이 DOM을 이용하면 코드를 이해하기 쉽고, 유지보수하기 편해진다. 다음은 샘플 코드이다. 여기서 중요한 부분은 꼭 merge할 cell은 정렬이 되어 있어야 한다는 것이다. (DB에서 query 조회 시 order by를 이용하여 정렬 처리) 정렬이 안 되어 있는 상태에서 merge를 하게 되면 다음과 같이 원하지 않는 결과를 가져올 수 있다. 이유는 코드를 확인해 보면 안다. 2012. 11. 6. jquery radio 테스트 radio 버튼 처리를 위한 테스트 코드를 작성해 보았다. 초기 로딩 화면은 다음과 같다. 테스트 코드는 다음과 같다. mWeb inApp HTML5 this is M area mobile web this is I area inapp this is H area html5 여기서 한가지 고민되는 부분이 있었다. radio 버튼을 클릭할 때마다 text를 변경하며 노출해야 하는데 위의 테스트 코드와 같이 hide(), show()를 이용하여 처리를 하다보면 버튼 항목이 추가되었을 때 늘어난 항목 만큼 조건절에 모두 추가해 줘야 한다. 그래서 루프를 이용하여 다음과 같이 처리하였다. 조금은 코드가 깔끔해 졌다. ^^ 개발을 하다보면 시간에 쫓겨 이와 같은 고민을 하지 못하고, 그냥 지나쳐 버리곤 했는데 학습 .. 2012. 11. 6. jquery checkbox 전체 선택, 전체 해제, 체크 값 추출 jquery를 이용하여 checkbox 핸들링 테스트를 해보았다. 체크 박스 전체 석택체크 박스 전체 해제체크 되어 있는 값 추출서버에서 받아온 데이터 체크하기 (콤마로 받아온 경우) 1번째 checkbox2번째 checkbox3번째 checkbox4번째 checkbox 한 가지 고민스러운 것은 서버에서 받아온 데이터가 콤마가 아닌 리스트 형태일 경우 어떻게 처리하는 것이 좋을까 이다. service layer에서 리스트 형태의 checkbox 데이터를 콤마 형태로 가공한 후 view에 던져줘야 할까?아니면 리스트로 받은 데이터를 view에 던져주어 데이터 가공 작업을 위임할까? okjsp에 질문올려서 다른 분들은 어떤 방법을 사용하고 있는지 알아봐야 겠다. 2012. 11. 5. jquery selector 실습 tree를 이용하여 화면을 개발하였는데 jquery를 잘 모르다보니 초반에 너무 삽질을 많이 했다. 지금은 웬만큼 익숙해졌지만 좀 더 간결하고 깔끔하게 짤 수 있는 방법을 찾기 위해 지속적인 테스트를 해보려고 한다. 브라우저는 크롬을 사용하였고, console.log 를 이용하여 디버깅을 하였다. 이제는 jquery selector에 대한 부담이 없어졌다. 이제 클라이언트 개발도 어느 정도 자신감이 생기기 시작했고, 두려움이 사라지고 있다. 물론 이것만 알았다고 해서 자만하지 말고, 더더욱 발전할 수 있도록 반복 숙달하자. 결과 화면 2012. 11. 2. javascript Array객체에 contains 메서드 추가 Array 객체에서 특정 요소를 넘겨주면 해당 요소가 Array 객체에 존재하는지 알고 싶었다. 자바의 contains 메서드가 존재하지 않을까 찾아보니 javascript Array객체에서 제공하는 메서드는 없었고 대신 prototype을 이용하여 함수를 구현하는 예제는 있었다. prototype이 뭘까 궁금하여 그 특성에 대해서 정리해 보았다.자바스크립트의 모든 객체는 프로토타입이라고 불리는 또 다른 객체를 내부적으로 참조할 수 있다. - 모든 function 에는 Prototype 객체를 가르키는 prototype 이라는 프로퍼티가 존재 객체의 속성을 액세스 했을 때 그 객체의 속성에서 못찾으면 prototype 속성에서 찾는다. - prototype은 각 객체간 프로퍼티를 공유할 수 있게 하기 위.. 2012. 11. 2. 이전 1 2 다음
