iframe 의 parent function 호출

이번에는 iframe에서 parent의 function을 호출 하여 trigger를 설정 하는 방법을 설명 한다.

화면구성에 필요한 부분이 있어서 만들어 봤는데

알면 정말 간단 한데..

기억이 나질 않아서, 전에 이런 걸 만든 적이 있는데..

또 구글링으로 시간을 보내게 된다. ㅡ.ㅡ

하소연은 이만 접고 실제 코딩 질..

   

샘플 프로젝트는 asp.net MVC4로 개발 되었습니다.

   

1. Parent (index.cshtml)

@{
    ViewBag.Title = "Index";
}

<h2>parent</h2>

<div class="container">
    <div>
        <iframe src="~/iframe/iframe" style="width:100%; height:370px"></iframe>
    </div>
    <div>
        <input type="button" value="Parent Button" />
    </div>
</div>

<script type="text/javascript">
    $(document).ready(function () {
        $("input[type=button]").click(function () {
            alert('Parent Button Click');
        });
    });


    function CallIframe(msg)
    {
        // iframe 에서 호출하여 alert 실행
        alert(msg);

        // parent button click event 실행
        $("input[type=button]").trigger('click');
    }

</script>

2. iframe cshtml

 
@{
    Layout = null;
    ViewBag.Title = "Iframe";
}
@Scripts.Render("~/bundles/jquery")
<h2>Iframe</h2>
<div>
    <div>여기는 Iframe 구간 입니다.</div>
    <div> <input type="button" class="btn-default" /></div>
</div>
<script type="text/javascript"> 
    $(document).ready(function () {
        $('input[type=button]').click(function () {
            parent.CallIframe('iframe에서 호출했습니다.');
        });
    });
</script> 

소스 내용은 간단한데.

iframe 페이지에서 parent.CallIFrame(); // parent.[parent 의 function] 으로 호출하면

끝..~~

   

참 쉽죠잉