iframe사용시 프레임 안의 버튼을 컨트롤 하는 방법

iframe영역 위에 버튼을 추가 할 경우 해당 버튼의 기능이 잘 동작하지 않는 경우가 있다

위의 상황일 경우 참조 할 수 있는 방법이다.

 

 

[재현 flow]

- 일반영역에서 (여기서는 div)클릭시 해당위치에 있는 iframe의 마커로 이동하면서 상세보기가 보인다.

- 상세보기 화면에서 "사용량 상세보기" 버튼은 iframe영역 위에 만든 버튼이다 해서 이 부분이 컨트롤을 하기 위해서는 작업이 필요하다.

 

[작업 구조]

▶ postMessage

현재 화면의 구성은 3댑스다 바탕이되는 div 1댑스, iframe 1댑스, iframe 위의 버튼 1댑스 해서 총 3댑스 이다.

여기서 접근을 parent.parent 로 하게 되면 최종 접근인 iframe위의 버튼으로 접근이 되고 parent로 하게 되면 iframe에 접근하게된다.

이렇게 접근을 줘서 detailBtn() 함수를 태워 버튼에 접근하면 될거라 생각을 했는대 

<button onclick="parent.parent.detailBtn('${wmInfo.resourceId}', '${wmInfo.wmId}', '${wmInfo.lastCommDate}')" type="button" class="btn btn-primary btn-sm margin-r-xs">사용량 상세보기</button>

 

iframe은 이벤트 호환이 되지가 않아 parent.parent.postMessage postMessage로 해줘야 이벤트가 보내진다.

parent.parent.postMessage({resourceId: resourceId, wmId:wmId, lastCommDate:lastCommDate}, '*')

 

[코드]

<script type="text/javascript">

function detailView(resourceId, wmId, lastCommDate){

parent.parent.postMessage({resourceId: resourceId, wmId:wmId, lastCommDate:lastCommDate}, '*')

}

</script>

 

<ul class="list-unstyled">

<li><span class="title">AID</span><span class="value">${wmInfo.resourceId}&nbsp;</span></li>

<li><span class="title">BID</span><span class="value">${wmInfo.wmId}&nbsp;</span></li>

<!-- <li><span class="title">이름</span><span class="value">&nbsp;</span></li>

<li><span class="title">업종</span><span class="value">&nbsp;</span></li> -->

</ul>

 

<ul class="list-unstyled">

<li><span class="title">상태</span><span class="value">${wmInfo.wmStatus}&nbsp;</span></li>

<li><span class="title">배터리1</span><span class="value">${wmInfo.wmBatteryStatus}&nbsp;</span></li>

<li><span class="title">배터리2</span><span class="value">${wmInfo.batteryStatus}&nbsp;</span></li>

</ul>

 

<div class="margin-t-xs text-left" style="padding-top:20px;">

<button onclick="detailView('${wmInfo.resourceId}', '${wmInfo.wmId}', '${wmInfo.lastCommDate}')" type="button" class="btn btn-primary btn-sm margin-r-xs">사용량 상세보기</button>

</div>