| sitelink1 | http://zinever.tistory.com/3 |
|---|
오류:호출자(서버 응용 프로그램이 아닌 서버)가 사용될 수 없어서 사라졌습니다. 모든 연결이 올바르지 않습니다. 호출이 실행되지 않았습니다.
opener 와 popup 창간에 변수를 참조하는 경우, 두 창 모두 열려 있는 상태라면 특정 변수를 참조 하는데 별다른 문제가
없는데,
만약 popup창을 닫는 동작과 함께 popup창에서 특정 변수, 객체를 opener로 전달 할때에는 브라우져 마다 각각 다르게
동작한다.
<브라우저별
전달방식>
| 기본 변수 (integer, string등) | 참조 변수 (Object) | Function | |
| Internet Explorer | 값 전달 | 참조 전달 | 참조 전달 |
| FireFox | 값 전달 | 값 전달 | 참조 전달 |
| Chrome | 값 전달 | 값 전달 | 참조 전달 |
| Safari | 값 전달 | 값 전달 | 참조 전달 |
| Opera | 값 전달 | 값 전달 | 값 전달 |
popup 의 전역 window 컨텍스트가 유효한 상태라면 값 전달이든, 참조 전달이든 opener 와 popup간에 모든 함수와 변수들에 접근 할수 있지만 popup이 close 되고 난 후에는 opener에 어떤 방식으로 변수나, 객체가 전달 되었는지에 따라서 popup에서 전달된 값의 사용 유무가 결정 된다.
* 특이한 점은 Opera 브라우저는 Function 도 값 전달 처럼 동작 한다. popup 이 닫힌 후에도 popup에서 전달된 함수를 실행 시킬수 있다.
<예제 코드>
opener.html
<html>
<head>
<script>
var openerVar = "opener: variable";
var openerObj = {
function useVar(){
<head>
<script>
var openerVar = "opener: variable";
var openerObj = {
result:'opener: object'
};
function openerFunc(){
function openerFunc(){
alert('opener function');
}
function useVar(){
alert(openerVar);
}
function useObj(){ alert(openerObj.result);
}
function useFunc(){
function useFunc(){
openerFunc();
}
function setVariable(rs){ openerVar=rs;
}
function setObject(rs){
function setObject(rs){
openerObj=rs;
}
function setFunction(rs){
function setFunction(rs){
openerFunc = rs;
}
function openWin(){ popupWin = window.open('popup.html', '',
'width=300,height=300');
}
function checkPopup(){
function checkPopup(){
alert(popupWin.Global);
}
</script>
<body>
<ul>
<li><a href="javascript: openWin(">팝업창 열기</a></li>
<li><a href="javascript: checkPopup(">팝업창 확인</a></li>
<li><a href="javascript: useVar(">변수 확인</a></li>
<li><a href="javascript: useObj(">객체 확인</a></li>
<li><a href="javascript: useFunc(">함수 확인</a></li>
</ul>
</body>
</html>
</script>
<body>
<ul>
<li><a href="javascript: openWin(">팝업창 열기</a></li>
<li><a href="javascript: checkPopup(">팝업창 확인</a></li>
<li><a href="javascript: useVar(">변수 확인</a></li>
<li><a href="javascript: useObj(">객체 확인</a></li>
<li><a href="javascript: useFunc(">함수 확인</a></li>
</ul>
</body>
</html>
popup.html
<html>
<head>
<script>
var Global = "POPUP WINDOW";
var popupVar = "popup : variable;
var popupObj = {result:'popup: object'};
function popupFunc(){
<head>
<script>
var Global = "POPUP WINDOW";
var popupVar = "popup : variable;
var popupObj = {result:'popup: object'};
function popupFunc(){
alert('popup Function');
}
function setOpener(){opener.setVariable(popupVar);
opener.setObject(popupObj);
opener.setFunction(popupFunc);
window.close();
}
</script>
<body>
<a href="javascript: setOpener(">Opener에 값 전달</a>
</body>
</html>
</script>
<body>
<a href="javascript: setOpener(">Opener에 값 전달</a>
</body>
</html>
Internet
Explorer에서 popup에서 객체(Object)를 opener에 전달 하고 popup을 닫아 버린후 opener에서 해당 객체에 접근하면
아래와 같은 에러를 볼 수 있다.
Function까지는 아니더라도 객체를 전달 할때에는 Internet Explorer와 호환을 위해서 객체 자체를 바로 전달 하지 않고,
객체를 String으로 opener에 전달한 후 opener에서 해당 String을 eval 함수로 평가한 후 사용 하면 된다.
전달객체가 복잡한 자료 구조일 경우에는 사용하기가 번거로울 수도 있지만...ㅜㅜ;
<객체를 String 형식으로 전달 하는 방법>
opener.html
function setObjectString(rs){
openerObj=eval('(' + rs + ')');
}
popup.html
var strObj = "{result:'popup: string object'}";
function setOpener(){
opener.setObjectString(strObj);
window.close();
window.close();
}
위와 같은 방법으로 function 까지 opener에 전달 할수 있다...
Ajax를 사용할 때 응답결과를 JSON으로 받아서 처리 하는 것과 유사 한데.. 조금 응용하면 Java의 RMI를 유사하게 흉내 낼 수 있을 것 같다. javascript 함수를 HTML이나, .JS 파일에 정의된 함수를 사용 하는 것이 아니라, 필요 할 때마다 서버측에서 필요한 함수를 요청해서 사용 하는 형태로...
