JQuery event.preventDefault()가 설정된 경우 window.open에 팝업 차단 무시

JQuery event.preventDefault()가 설정된 경우 window.open에 팝업 차단 무시

하이퍼링크 클릭 이벤트 시 조건부로 JQuery 대화상자를 보여주고 싶습니다.

조건 1에서 JQuery 대화를 여는 것과 같은 요구 사항이 있으며 조건 1이 충족되지 않으면 해당 클릭 이벤트의 'href' 태그가 참조하는 페이지로 이동합니다.

나는 링크 클릭 이벤트의 기능을 호출할 수 있습니다.이제 이 기능은 다른 URL(내 Spring 컨트롤러를 실행하고 응답을 반환하는)을 실행하여 해당 조건을 확인합니다.

팝업 차단기에 의해 차단되는 window.open에서만 모든 기능이 완벽하게 작동합니다.

$('a[href*=/viewpage?number]').live('click', function(e) {
    e.preventDefault();
    redirectionURL = this.href;
    pageId= getUrlVars(redirectionURL)["number"];
    $.getJSON("redirect/" + pageId, {}, function(status) {
        if (status == null) {
            alert("Error in verifying the status.");
        } else if(!status) {
            $("#agreement").dialog("open");
        } else {
            window.open(redirectionURL);
        }
    });
});

제거하면e.preventDefault();코드에서 팝업 차단기는 페이지를 차단하지 않지만 조건 1의 경우 대화를 열고 'href' 페이지를 엽니다.

제가 하나를 풀면 또 다른 문제가 생깁니다.저는 두 조건을 동시에 정의를 내릴 수 없습니다.

제가 이 문제를 해결할 수 있도록 도와주시겠습니까?

이 문제가 해결되면 대화의 OK 이벤트에 대한 탐색과 같은 해결해야 할 다른 문제가 있습니다. :)

팝업 차단은 일반적으로 허용됩니다.window.open사용자 이벤트 처리 중에 사용되는 경우(클릭 등).당신의 경우, 당신이 전화하는 것은window.open 나중에, 행사중이 아니라, 왜냐하면$.getJSON비동기식입니다.

두 가지 옵션이 있습니다.

1. 다른 일을 하라구요.window.open.

2. 브라우저의 UI를 잠그기 때문에 페스트처럼 일반적으로 피해야 하는 아약스 호출을 동기화합니다.$.getJSON는 다음과 같습니다.

   $.ajax({
     url: url,
     dataType: 'json',
     data: data,
     success: callback
   });
   

   ...그래서 당신은 당신을$.getJSON당신의 파라미터를 위에 매핑하고 추가함으로써 동기화를 호출합니다.async: false:

   $.ajax({
       url:      "redirect/" + pageId,
       async:    false,
       dataType: "json",
       data:     {},
       success:  function(status) {
           if (status == null) {
               alert("Error in verifying the status.");
           } else if(!status) {
               $("#agreement").dialog("open");
           } else {
               window.open(redirectionURL);
           }
       }
   });
   

   다시 한번 말씀드리지만, 목표를 달성할 수 있는 다른 방법을 찾으실 수 있다면, 저는 동기식 아약스 콜을 지지하지 않습니다.하지만 만약에 안된다면, 여기 있습니다.

   비동기 호출로 인해 테스트에 실패하는 코드의 예는 다음과 같습니다.

   라이브 예시 | 라이브 소스 (JSBin 변경으로 인해 라이브 링크가 더 이상 작동하지 않음)

   jQuery(function($) {
     // This version doesn't work, because the window.open is
     // not during the event processing
     $("#theButton").click(function(e) {
       e.preventDefault();
       $.getJSON("http://jsbin.com/uriyip", function() {
         window.open("http://jsbin.com/ubiqev");
       });
     });
   });
   

   다음은 동기화 호출을 사용하여 작동하는 예입니다.

   라이브 예시 | 라이브 소스 (JSBin 변경으로 인해 라이브 링크가 더 이상 작동하지 않음)

   jQuery(function($) {
     // This version does work, because the window.open is
     // during the event processing. But it uses a synchronous
     // ajax call, locking up the browser UI while the call is
     // in progress.
     $("#theButton").click(function(e) {
       e.preventDefault();
       $.ajax({
         url:      "http://jsbin.com/uriyip",
         async:    false,
         dataType: "json",
         success:  function() {
           window.open("http://jsbin.com/ubiqev");
         }
       });
     });
   });
   

사용자가 직접 일부 작업을 수행하는 경우에만 브라우저 차단 없이 window.open을 호출할 수 있습니다.브라우저에서 플래그를 전송하고 사용자 작업에 의해 창이 열리는지 확인합니다.

따라서 다음 시나리오를 사용해 볼 수 있습니다.

1. var my window = window.open(")
2. 이 창에 로드 메시지 그리기
3. 요청이 완료되면, 그냥 mywindow.location = 'http://google.com '에 전화하세요.

저는 이 문제가 있었고 콜백이 데이터를 반환할 때까지 URL을 준비하지 않았습니다.해결책은 콜백을 시작하기 전에 빈 창을 열고 콜백이 돌아오면 위치를 설정하는 것이었습니다.

$scope.testCode = function () {
    var newWin = $window.open('', '_blank');
    service.testCode().then(function (data) {
        $scope.testing = true;
        newWin.location = '/Tests/' + data.url.replace(/["]/g, "");
    });
};

한번 해보세요, 저한테 효과가 있어요

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    $.ajax({
        type: 'POST',
        url: '/echo/json/',
        success: function (data) {
            redirectWindow.location;
        }
    });
});

나는 이 http://jsfiddle.net/safeeronline/70kdacL4/1/ 을 만지작거리고 있습니다.

Windows(윈도우)는 사용자 시작 이벤트(예: 클릭 콜백)와 동일한 스택(마이크로태스킹)에 생성되어야 하므로 나중에 비동기적으로 생성할 수 없습니다.

그러나 URL이 없는 창을 만들 수 있으며, 비동기적으로라도 그 창의 URL을 알게 되면 변경할 수 있습니다.

window.onclick = () => {
  // You MUST create the window on the same event
  // tick/stack as the user-initiated event (e.g. click callback)
  const googleWindow = window.open();

  // Do your async work
  fakeAjax(response => {
    // Change the URL of the window you created once you
    // know what the full URL is!
    googleWindow.location.replace(`https://google.com?q=${response}`);
  });
};

function fakeAjax(callback) {
  setTimeout(() => {
    callback('example');
  }, 1000);
}

현대 브라우저는 빈 페이지(흔히 호출됨)로 창을 엽니다.about:blank), 그리고 URL을 얻기 위한 비동기 작업이 상당히 빠르다고 가정하면 결과적인 UX는 대부분 괜찮습니다.대신 사용자가 기다리는 동안 로드 메시지(또는 다른 메시지)를 창에 렌더링하려면 Data URI를 사용할 수 있습니다.

window.open('data:text/html,<h1>Loading...<%2Fh1>');

이 코드는 저를 도와줍니다.이것이 몇몇 사람들에게 도움이 되기를 바랍니다.

$('formSelector').submit( function( event ) {

    event.preventDefault();

    var newWindow = window.open('', '_blank', 'width=750,height=500');

    $.ajax({

        url: ajaxurl,
        type: "POST",
        data: { data },

    }).done( function( response ) {

        if ( ! response ) newWindow.close();
        else newWindow.location = '/url';

    });
});

사용자가 이벤트를 시작해야 한다는 관찰은 이 부분의 첫 부분을 파악하는 데 도움이 되었지만, 그 후에도 크롬과 파이어폭스는 여전히 새 창을 차단했습니다.두 번째 부분은 한 코멘트에 언급된 링크에 target="_blank"를 추가하는 것이었습니다.

요약: 사용자가 시작한 이벤트에서 window.open을 호출해야 합니다. 이 경우 링크를 클릭하면 해당 링크에 target="_blank"가 있어야 합니다.

아래 예에서 링크는 class="button- twitter"를 사용하고 있습니다.

$('.button-twitter').click(function(e) {
  e.preventDefault();
  var href = $(this).attr('href');
  var tweet_popup = window.open(href, 'tweet_popup', 'width=500,height=300');
});

링크 요소를 사용해 보고 javascript로 클릭합니다.

<a id="SimulateOpenLink" href="#" target="_blank" rel="noopener noreferrer"></a>

대본을

function openURL(url) {
    document.getElementById("SimulateOpenLink").href = url
    document.getElementById("SimulateOpenLink").click()
}

이렇게 쓰시면 됩니다.

//do stuff
var id = 123123141;
openURL("/api/user/" + id + "/print") //this open webpage bypassing pop-up blocker
openURL("https://www.google.com") //Another link

var url = window.open("", "_blank");
url.location = "url";

저한테는 효과가 있었어요

이 방법을 사용하여 리액트 코드의 팝업 차단을 방지하고 있습니다.그것은 다른 모든 자바스크립트 코드에서도 작동할 것입니다.

클릭 이벤트에서 비동기 호출을 할 때는 먼저 빈 창을 열고 나중에 비동기 호출이 완료되면 URL을 작성하면 됩니다.

const popupWindow = window.open("", "_blank");
popupWindow.document.write("<div>Loading, Plesae wait...</div>")

비동기 호출이 성공하면 다음과 같이 적습니다.

popupWindow.document.write(resonse.url)

언급URL : https://stackoverflow.com/questions/9514698/bypass-popup-blocker-on-window-open-when-jquery-event-preventdefault-is-set