jquery window.open in ajax 성공 차단
ajax 성공 호출에서 새 브라우저 창을 열려고 했지만 팝업으로 차단되었습니다.검색을 해보니 사용자 이벤트를 창에 연결해야 합니다.열어봐야 이런 일이 일어나지 않습니다.
또한 Ajax 전에 빈 창을 열고 성공 콜에서 정상적으로 URL을 로드하는 솔루션도 찾았습니다.
그래서 이것과 관련하여 두 가지 질문이 있습니다.
1 - 이 빈 창을 열고 싶지 않기 때문에 이 방법밖에 없습니까?
2 - 이게 유일한 방법이라면 이 새로운 창에 html을 로드하려면 어떻게 해야 하나요?예를 들어, ajax가 실패했을 경우 URL이 열리지 않기 때문에 이 빈 창에 오류 텍스트를 추가하려면 어떻게 해야 합니까?
또, Ajax 콜을 동기화하고 싶지 않은 것도 주의해 주세요.이건 에이잭스의 목적을 저버린거야. 그리고 난 이게 이미 폐지되지 않았다면...검색에서 잘못 읽으면 정정해 주세요.
$('#user-login').on('click', function () {
var $form = $(this).closest('form');
window.open('about:blank', 'myNewPage');
$.ajax({
type: 'post',
url: '/spc_admin/process/p_user_login.php',
data: $form.serialize(),
dataType : 'json'
}).done(function (response) {
$myElem = $('#user_login_message'); //performance for not checking dom
$myElem.fadeOut('fast', function(){
if (response.success)
{
$myElem.html('<p><b class="text-blue">Success!</b> You have been logged in as \'<b>'+response.username+'</b>\' in a new browser window.</p>').fadeIn('fast');
// open new window as logged in user
//window.open('http://www.example.com/');
window.open('http://www.example.com/', 'myNewPage');
}
else
{
$myElem.html('<p><b class="text-red">Error!</b> Please select a valid user from the dropdown list.</p>').fadeIn('fast');
}
});
});
});
편집:
관심 있는 분들을 위해서...이게 제가 생각해낸 해결책입니다.연속 클릭이 같은 창에서 열리고 새 창이 반복적으로 열리지 않도록 새 창의 이름이 필요합니다.html을 추가하는 것은 답변에 나와 있는 것과 조금 다르며, 이것은 동작합니다.창문이 흐려지지 않아서 없어요.제가 아는 바로는 이것은 제어할 수 없고 브라우저에 관한 것입니다.
$('#user-login').on('click', function () {
var $form = $(this).closest('form');
//open blank window onclick to prevent popup blocker
var loginWindow = window.open('', 'UserLogin');
$.ajax({
type: 'post',
url: '/spc_admin/process/p_user_login.php',
data: $form.serialize(),
dataType : 'json'
}).done(function (response) {
$myElem = $('#user_login_message'); //performance for not checking dom
$myElem.fadeOut('fast', function(){
if (response.success)
{
// show success
$myElem.html('<p><b class="text-blue">Success!</b> You have been logged in as \'<b>'+response.username+'</b>\' in a new browser window.</p>').fadeIn('fast');
// open new window as logged in user
loginWindow.location.href = 'http://www.example.com/';
}
else
{
// show error
$myElem.html('<p><b class="text-red">Error!</b> Please select a valid user from the dropdown list.</p>').fadeIn('fast');
// add error to the new window (change this to load error page)
loginWindow.document.body.innerHTML = '<p><b>Error!</b> Please select a valid user from the dropdown list.</p>';
}
});
});
에서 연 창에서 새 URL을 열기 위해onclick
, 다음을 수행합니다.
- 생성한 새 창을 변수에 저장합니다.
var newWindow = window.open("","_blank");
- 새 창의 위치 변경
newWindow.location.href = newURL;
유저 익스피리언스를 향상시키기 위해서 할 수 있는 또 하나의 방법은, 새로운 창을 곧바로 백그라운드로 송신하는 것입니다( ).newWindow.blur
를 열고 나서, 다시 포그라운드로 가져옵니다).newWindow.focus
URL을 여는 동안 새 창을 엽니다.
을 실행합니다.window.open("about:blank", "newPage");
AJAX 콜 전과 콜 후에 호출하여 열린 창에 URL을 추가합니다.window.open("http://google.com", "newPage");
.
$('#user-login').on('click', function () {
var $form = $(this).closest('form');
$.ajax({
type: 'post',
url: '/spc_admin/process/p_user_login.php',
data: $form.serialize(),
dataType : 'json',
success: function(res) {
$myElem = $('#user_login_message'); //performance for not checking dom
$myElem.fadeOut('fast', function(){
$myElem.html('<p><b class="text-blue">Success!</b> You have been logged in as \'<b>'+response.username+'</b>\' in a new browser window.</p>').fadeIn('fast');
// open new window as logged in user
window.open('http://www.example.com/', '_blank');
} else {
$myElem.html('<p><b class="text-red">Error!</b> Please select a valid user from the dropdown list.</p>').fadeIn('fast');
}
});
});
언급URL : https://stackoverflow.com/questions/20822711/jquery-window-open-in-ajax-success-being-blocked
'programing' 카테고리의 다른 글
JSON 데이터 유형 postgres별 순서 (0) | 2023.03.17 |
---|---|
jquery AJAX 성공 콜백에서 기능하도록 변수 전달 (0) | 2023.03.17 |
모든 MUI 컴포넌트에 대해 박스 섀도를 글로벌하게 디세블로 하려면 어떻게 해야 합니까? (0) | 2023.03.12 |
코드 분할로 인해 SPA 신규 도입 후 청크가 로드되지 않음 (0) | 2023.03.12 |
AJAX POST 및 플러스 기호( + ) -- 부호화 방법 (0) | 2023.03.12 |