반응형

iframe으로 불러들인 컨텐츠의 높이만큼 부모창에서 iframe의 높이를 동일하게 만들고 싶을 경우 몇가지 고려할 요소가 존재한다.
구조는 대략 이러하다.

부모창
<div id="부모창의DIV">
    <iframe id="부모창의IFRAME"></iframe>
</div>

자식창
<div id="자식창의DIV">
</div>

1. contents() 
2. on load

1. contents() 
먼저 iframe에 접근하기 위해선 그냥 find로 접근하면 안된다.
contents().find()로 접근해야 한다.

$("#부모창의IFRAME").contents().find("#자식창의DIV")

2. on load
1번까지 하고 접근해보면 null을 리턴하거나 undefine을 리턴한다.
본창의 document가 ready되었을 뿐이지 iFrame의 내용까지 모두 불러와진게 아니기 때문이다.
따라서 1번 코드는 이렇게 호출되어야만 한다.
부모창의IFRAME의 contents에서 자식창의DIV란 요소를 획득하겠다란 이야기인데
언제?
iFrame이 모두 불러와져서 온전하게 자식요소들에 접근이 가능할 때 접근하겠다.

$("#부모창의IFRAME").on("load", function() {
        var objIframeChild = $("#부모창의IFRAME").contents().find("#자식창의DIV);
        $("#부모창의DIV").height(objIframeChild.height());
        /* objIframeChild로 iFrame의 자식을 획득하였으니 이녀석을 가지고 놀면 된다. 
            objIframeChild.height() 등등*/
}

여기까지 한다면 내 도메인 내에선 아무 문제 없이 주고 받고가 가능하지만
다른 도메인이라면 이야기가 달라진다.

망할 cross oigin

Uncaught DOMException: Blocked a frame with origin "http://~~~~" from accessing a cross-origin frame.
크롬에서 개발자 도구로 지켜보면 이 에러를 내뱉으며 동작하지 않는다.

iFrame 소스의 on load 또는 jQuery $(document).ready 아래에 부모로의 통신용 postMessage를 구현해준다.
구조는 간단하다.
window.parent.postMessage() 안에 {키, 값} 형태로 넣어주고 콤마(,) 이후 전달 되는 도메인이나 IP주소를 입력해주면 된다.
도메인이나 IP주소 대신 *도 가능하지만 해킹당할 우려가 있으니 가급적 지양해야 할 것이고
만약 여러 도메인으로 통신을 해야겠다면 도메인이나 IP주소만 바꿔가며 window.parent.postMessage를 반복하면 된다.

window.parent.postMessage({키값: 보내고 싶은 값 }, "허용되는 도메인 또는 아이피");

보내는 곳인 자식쪽 소스
window.parent.postMessage({ childHeight: $("자식창의DIV").height() }, "http://......");

받는 곳인 부모쪽
그냥 리스너로메세지 받겠다 하면 끝이다.
window.addEventListener('message', function(e) {
        $("#부모창의DIV").height(e.data.childHeight);
 });

반응형
Posted by Hippalus

댓글을 달아 주세요

반응형

웹개발을 하다보면 속도가 느려 사용을 못할 쿼리를 짜게 되기도 한다.
DB설계란게 다 그렇듯 최종 완성물로 가기까지 계속 설계가 변경되기도 하고 설령 완료되어 운영하더라도 기능 변경 요구나 데이터가 쌓여감에 따라 초기 설계와 달라지거나 속도가 느려지는 일들이 비일비재 하므로 그때마다 DBA에게 위탁하기도 뭐하고..
작은 회사에선 DBA가 있을턱도 없고 그렇다고 느린 속도를 한탄만 하고 있을 순 없는데
MSSQL에선 기특하게도 디비 튜닝을 매우 쉽게 도와주는 기능을 기본 탑재하고 있다.

초보자도 쉽게 튜닝이 가능하므로 따라해보자

1. 시퀄(mssql을 있어 보이게 발음해보자) Management Studio을 실행 후  문제가 되는 쿼리창에 복사해 두자.
2. Management Studio의 상단 메뉴에 보면 예상실행계획 표시라는 아이콘이 보일것이다. 
네모 세개가 선으로 이어지고 거기에 삼각형이 뒤집어진 아이콘인데 실행 버튼 우측에 조금만 가면 있다.
모르겠으면 단축키로 Ctrl + L을 누르면 된다.

3. 쿼리가 실행되고 나면 하단 쿼리 결과 우측에 보면 요런 ... 네모 버튼이 보일것이다.
여기에서 마우스 우측 버튼을 누르면 컨텍스트 메뉴가 나타난다.

누락된 인덱스 세부 정보(M)을 마우스 왼쪽 버튼으로 누르면

 새 쿼리창이 뜨면서 아래처럼 주석안에 누락된 인덱스를 친절히 알려준다.
/* 주석안의 */ CREATE INDEX문에서 대괄호 [] 안의 인덱스 이름을 지정해주고 실행만 시켜주면 튜닝에 필요한 적합한 인덱스가 나타난다.
<NAME OF MISSING INDEX, SYSNAME, > 이부분을 원하는 인덱스 명으로 바꿔주면 된다.
내 경우 IDX_TABLENAME_FIELD 명을 규칙으로 정해서 알맞게 바꿔주고 있다.

5. 다시 2번을 눌러서 4번까지 반복해가며 속도가 빨라질 때까지 진행하면 된다.


조건문에 따라 쿼리문이 달라지기 때문에 그에 맞게끔 쿼리를 변경해가며 수행해야 할 수도 있다.
또 인덱스를 추가만 한다고 모든 경우에 다 맞아 떨어지리란 보장 또한 없다.
경우에 따라선 설계 자체를 변경해야 할 수도 있고 쿼리 자체를 바꿔야 할수도 있지만
경험상 상당수 속도 개선 효과를 볼 수 있었다.

 

 

반응형
Posted by Hippalus

댓글을 달아 주세요

반응형

그냥 jQuery로 select box를 value로 변경하는건 쉬움
$("#SELECTBOX_MAIN_ID").val("1").trigger('change');

하지만 SUB selectbox가 존재하여 main selectbox가 변경되면 sub selectbox의 값도 바꿔줘야 할 경우
trigger의 change 이벤트 설정시 json형태로 key, value로 넘겨준 후
$("#SELECTBOX_SUB_ID").val("MAINVALUE").trigger('change', [{selectValue:'SUBVALUE'}]);

해당 change control의 change이벤트에 파라메터로 넘겨 받아 넘겨준 key로 받아오면 됨
$("#SELECTBOX_MAIN_ID").change(function(e, paramData {
       if (paramData != null) {
           $("#SELECTBOX_SUB_ID").val(paramData.selectValue).trigger("change");
        }
});

 

반응형
Posted by Hippalus

댓글을 달아 주세요