iframe 자바스크립트 호출

해당이슈는 iframe내에 있는 레이어 팝업을 띄우면서 부모페이지 전체에 딤드 처리를 하기위함.

iframe페이지에서 레이어팝업을 띄우면서 뒷부분을 딤드처리 시키기 (alert 동일효과)

이렇게 하기위해선 iframe을 갖고 있는 부모페이지에서 자바스크립트 호출이 가능해야 한다. 

아래와 같이 하면 iframe간 자바스크립트 호출이 가능해진다.

부모페이지

<script>

//testframe(아이프레임) 안의 test(); 메소드 호출

    function getContent(){ 
       try{        
            document.testframe.test();       
       }catch(e) { 
        alert(e); 
       } 
    }

//아이프레임에서 호출할 자바스크립트 
   function setContent(){ 
     alert("setContent "); 
   } 
</script> 

아이프레임페이지

<script> 
    function test(){ 
        alert(" iframe method "); 
    } 
function Button1_onclick() { 
   try{    
        parent.setContent(); 
   }catch(e){ 
    alert(e); 
   } 
}

</script> 

<input id="Button1" type="button" value="부모자바스크립트 호출" onclick="return Button1_onclick()" />

iframe 페이지 내에서 딤드를 생성하는 javascript를 만든 후, 딤드에 대한 CSS를 처리한다.

iframe페이지와 iframe을 갖고 있는 부모페이지에서 각각 딤드 영역이 필요했기 때문에, 

두곳에서 dimmed를 생성했다.

iframe 페이지 내부

// 부모페이지 컨트롤

function dOpen() { 

  try{    

parent.dimmedOpen(); 

  }catch(e){ 

alert(e); 

  } 

}

function dClose() { 

  try{    

parent.dimmedClose(); 

  }catch(e){ 

alert(e); 

  } 

}

// layer open, close

var layerOpen = function(target){

var layer = document.getElementById(target),

membership_wrap = document.getElementById('membership_wrap'),

dimmed = document.createElement('div');

dimmed.setAttribute('class','dimmed');

dimmed.setAttribute('id','dimmed');

membership_wrap.appendChild(dimmed);

layer.style.display = 'block';

}

var layerClose = function(target){

var layer = document.getElementById(target),

membership_wrap = document.getElementById('membership_wrap'),

dimmed = document.getElementById('dimmed');

layer.style.display = '';

membership_wrap.removeChild(dimmed);

}

위 처럼하면 membership_wrap 이라는 id를 가진 태그 자식으로 <div id="dimmed" class="dimmed"></div> 라는 녀석이 생성된다.

iframe을 갖고 있는 부모페이지

// 딤드태그생성, 아이프레임영역 스타일추가

var dimmedOpen = function(){

var content = document.getElementById('content'),

dimmed = document.createElement('div');

dimmed.setAttribute('class','dimmed');

dimmed.setAttribute('id','dimmed');

content.appendChild(dimmed);

content.getElementsByTagName('iframe')[0].style.position = 'relative'

content.getElementsByTagName('iframe')[0].style.zIndex="9999";

}

var dimmedClose = function(){

var content = document.getElementById('content'),

dimmed = document.getElementById('dimmed');

content.removeChild(dimmed);

content.getElementsByTagName('iframe')[0].style.position = 'static'

content.getElementsByTagName('iframe')[0].style.zIndex="auto";

}

위에서 언급했듯이 부모에서 딤드를 처리하는 부분이 필요했기때문에, content라는 id를 가진 태그의 자식으로 <div id="dmimed" class="dimmed"></div>를 생성 후, iframe의 스타일 을 각각 에 맞게 조정하면 된다.

열기 (레이어를 닫으면서 딤드태그가 생성됨)

<a href="#" class="btn_agree_cancel" onclick="layerOpen('layer_pop'); return dOpen();"><span class="hide">개인정보 제공동의 해지하기</span></a>

닫기 (레이어를 닫으면서 딤드태그가 사라짐)

<button type="button" class="btn_cancel" onclick="layerClose('layer_pop'); return dClose();"><span class="hide">취소</span></button>

출처: http://bbora.com/bbs/zboard.php?id=study&page=6&sn1=&divpage=1&sn=off&ss=on&sc=on&select_arrange=subject&desc=asc&no=301