호출자(서버 응용 프로그램이 아닌 서버)가 사용될 수 없어서 사라졌습니다.

아래와 같은 자바스크립트 오류 메시지가 발생했다.

“호출자(서버 응용 프로그램이 아닌 서버)가 사용될 수 없어서 사라졌습니다. 모든 연결이 올바르지 않습니다. 호출이 실행되지 않았습니다.”

값이 아닌 참조 타입의 객체/배열의 링킹이 끊긴 경우 발생하는 오류이다.

대표적으로 window.open()으로 열기한 팝업과 관련된 오류를 예로 들 수 있다.

팝업에서 생성한 객체 또는 배열변수를 여는 쪽 윈도우(window.open()을 실행한 윈도우, 즉 opener)에서 가져다 쓰려고 할 때,

만약 팝업이 닫혀 있다면 참조값을 찾을 수 없어서 오류가 발생한다.

자바스크립트 문자열(String)과 숫자(Number)는 native 타입이어서 팝업이 닫혀 링킹이 끊겨도 상관없다(값 복사).

그러나 객체(Object)와 배열(Array)은 참조 상태(개념적으로 보면 일종의 포인터만 갖고 있는 상태)이므로 팝업이 닫히면 곤란하다.

해결책 1. 문자열 값으로 주고받기

오류를 원천적으로 없애려면 문자열로 주고받는 게 가장 확실하다.

문자열 복사는 어떤 브라우저에서도 값 복사로 이뤄지기 때문이다.

팝업창의 예를 들면 window.open() 으로 열기한 팝업 창에서는 객체/배열을 stringify 처리해서 문자열로 넘겨주고, opener 창에서는 문자열을 parse 해서 다시 객체/배열로 만들어 써야 확실하다.

팝업창 처리 예시

var returnValue = JSON.stringify(something);
window.opener.callbackFunc(returnValue);

window.close();

opener창 처리 예시

function callbackFunc(_returnValue) {

var returnObj = JSON.parse(_returnValue);

console.log(“returnObj”, returnObj);
}

해결책 2. 깊은 복사(Deep Copy) 활용하기

아니면 팝업창이 닫히기 전에 opener 창에서 깊은 복사(Deep Copy)를 수행하는 방법이 있다.

팝업창 처리 예시

var returnObj = something;

window.opener.callbackFunc(returnObj);

window.close();

opener창 처리 예시

function callbackFunc(_returnObj) {

var returnObj = deepCopy(_returnObj);

console.log(“returnObj”, returnObj);
}

deepCopy 함수의 내용은 깊은 복사를 수행하는 내용이면 된다.

객체/배열을 복사해서 새로운(기존과 독립인) 새로운 객체/배열을 만드는 것이다.

예를 들면 아래와 같이 짤 수 있다.

* JSON 객체를 사용한 깊은 복사 (객체/배열 복제) 함수

// js 깊은 복사
function deepCopy(_obj) {
    if (_obj == null) {
        return null;
    }

return JSON.parse(JSON.stringify(_obj));
}

깊은 복사에 대해서는 다음 포스트에 더 정리해두었다. => https://blog.naver.com/bb_/222381553736