ax5ui modal iframe param에 대한 정리

 

 

ax5ui-modal 중 iframe 기능을 사용할 때 발생했던 오류들을 정리하고자 합니다.

 

1. ax5ui-modal 을 중 iframe을 사용했을 때 기본적으로 발생하는 오류

 

Uncaught DOMException: Blocked a frame with origin "null" from accessing a cross-origin frame.

iframe을 사용할 경우 위와 같은 에러 메시지가 표출되거나 chrome상 보안 오류가 발생할 수 있습니다.

 

해결방법은 인터넷 익스플로러나 마이크로소프트 엣지를 사용하여 테스트하면 오류가 발생하지 않음을 확인할 수 있습니다.

 

오류가 발생하는 이유는 local 환경에서 file:// 로 시작되는 iframe에서는 보안 상의 이유로 발생되는 오류라서 실제로 가동되는 서비스 url에서는 문제 없이 동작합니다.(고로 local 환경이기 때문에 발생되는 오류입니다.)

 

2. 문법상 오류

 

<script type="text/javascript">
    var mask = new ax5.ui.mask();
    var modal = new ax5.ui.modal();
    var modalCallBack = function(){
        modal.close();
    };
    $(document.body).ready(function () {
 
        $('#modal-open').click(function () {
            modal.open({
                width: 600,
                iframe: {
                    method: "get",
                    url: "modal-iframe-content.html",
                    param: "callBack=modalCallBack"
                },
                onStateChanged: function () {
                    // mask
                    if (this.state === "open") {
                        mask.open();
                    }
                    else if (this.state === "close") {
                        mask.close();
                    }
                }
            }, function () {
 
            });
        });
 
    });
</script>

실제 예제 코드 상 iframe에서 param을 넘길때 "callBack=modalCallBack" 이라고 작성되도록 되어 있는데 실제로 기입했을 때 오류가 발생하고 "" 없이 callBack=modalCallBack  이라고 작성하여야 정상 동작합니다.

 

3. return시 발생하는 오류

 

<script type="text/javascript">
    $(document.body).ready(function () {
 
        //parent.modal.css({height: $(document.body).height() + 10});
        parent.modal.align();
 
        var param = ax5.util.param(ax5.info.urlUtil().param);
        $("#modal-close").click(function () {
            //console.log(param.callBack);
            parent[param.callBack]();
        });
    });
</script>

iframe으로 불러온 html을 닫을 때의 코드 예제입니다. 해당 예제로는 동작하지 않고 실제로는

$(document.body).ready(function () {
	$("#modal-close").click(function () {
    	return self.parent.callBack();
    });
});

이렇게 작성해주셔야 정상 동작합니다.

 

4. callBack 이외의 param 전달하기

 

iframe으로 값을 넘기고 싶은 경우에 param을 통해 전달해야 하는데 이미 callBack이 있기 때문에 넘길 수 있는 방법이 마땅치 않은데 self.parent를 활용하면 가능합니다.

var modalCallBack = function () {
	Grid.close();
}
function Show() {
	var id = this.id;
    openModal = Grid.open({
    	iframe: {
			method: "get",
			url: "Grid.html",
			param: callBack=id,
        }
    }, function () {
	}
)};

위와 같이 callBack=id를 넣어 값을 전달할 수 있습니다.

modalCallBack을 사용할 때는

$(document.body).ready(function () {
	$("#modal-close").click(function () {
    	return self.parent.modalCallBack();
    });
});

이렇게 함수를 직접 return 하여 사용하시면 됩니다.

 

 

그럼 지금까지 ax5ui modal 중 iframe을 사용할 때 발생했던 오류와 해결방법을 정리해봤습니다. 그럼 이만~~~