[제이쿼리 jquery] jquery Ajax 이후에 Popup 해야 하는 경우

개요

Jquery Ajax 통신 후에 팝업창을 띄우고자 할 때가 있습니다. 

저의 경우는 크롬을 사용중입니다. 다른 브라우저는 확인을 못했습니다. 

이 경우에, 비동기 통신 후 window.open(주소) 를 호출하게 되겠지요.

본문

(일반 Ajax 예시)

// ajax process
$.ajax({
	url:"url주소",
	method:"POST",
	data:formData,
	dataType:"html",
	success: eventSuccess,
	error: function(xhr, status, error) {alert(error);}
});

function eventSuccess(data)
{
	alert(data);
}

이런 식으로 Ajax 통신을 할 것입니다. 그런데 통신 이후에 Alert 창을 띄우는 것 말고, 팝업을 하고자 할 것인데요.

// ajax process
$.ajax({
	url:"url주소",
	method:"POST",
	data:formData,
	dataType:"html",
	success: eventSuccess,
	error: function(xhr, status, error) {alert(error);}
});

function eventSuccess(data)
{
	window.open("주소","_blank");
}

위와 같이 하게 되면, '크롬 브라우저'에서는 팝업을 블락(차단) 처리 해버립니다. 여러가지 테스트를 해본 결과로는, 자바스크립트의 함수를 호출(혹은 이벤트 발생) 후 일정 시간 뒤에 팝업이 실행되는 경우는, 차단 (혹은 처단... 혹은 응징...) 하는 것이 아닐까 추측해봅니다. 

결론적으로는, 다음과 같이 해결을 하였습니다.

(해결책 : 미리 팝업을 띄워놓고, Async 이후에 이동시키는 방법)

// 미리 팝업을 띄워놓고. 
var w = window.open("about:blank","_blank");


// ajax process
$.ajax({
	url:"url주소",
	method:"POST",
	data:formData,
	dataType:"html",
	success: eventSuccess,
	error: function(xhr, status, error) {alert(error);}
});

function eventSuccess(data)
{
	//여기서 팝업된 창의 주소를 변경하자.
	w.location.href = "팝업주소";
}

팝업창을 미리 띄워놓은 후에, 그 주소를 변경하는 방식입니다. 

연관 문서

  * 2010/07/16 - [자바스크립트 Javascript] 팝업창에서 opener 로 target 주고 submit (업데이트 2019-03-04)

  * 2014/05/19 - [자바스크립트 javascript] 팝업에서 opener 의 변경이 필요할 때

  * 2010/07/15 - 윈도우 팝업에서 부모창의 값 가져오기.

(참고. 어째서인지... 비슷한 글을 4번 작성했었네요...오늘 알았습니다...이 문제로 머리 아팠었나보네요...;;)