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

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

condition1에서 JQuery 대화를 열고 condition1이 충족되지 않으면 해당 클릭 이벤트가있는 '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();코드에서 제거하면 팝업 차단기가 페이지를 차단하지 않지만 condition1의 경우 대화 상자를 열고 'href'페이지를 엽니 다.

하나를 해결하면 다른 문제가 발생합니다. 나는 두 가지 조건을 동시에 정의 할 수 없습니다.

이 문제를 해결하도록 도와 주시겠습니까?

이 문제가 해결되면 해결해야 할 또 다른 문제가 있습니다. 예를 들어 대화의 OK 이벤트 탐색 :)

팝업 차단기는 일반적으로 사용자 이벤트 (예 : 클릭)를 처리 window.open하는 동안 사용 되는 경우 에만 허용 합니다 . 귀하의 경우에는 비동기 이기 때문에 이벤트 도중이 아니라 window.open 나중에 호출 $.getJSON합니다.

두 가지 옵션이 있습니다.

1. 대신 다른 작업을 수행하십시오 window.open.

2. ajax 호출을 동기식으로 만드십시오. 이는 브라우저의 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 myWindow = 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는 사용자가 시작한 이벤트 (예 : 클릭 콜백)와 동일한 스택 (일명 microtask ) 에 생성되어야합니다. 따라서 나중에 비동기식으로 생성 할 수 없습니다.

그러나 URL없이 창을 생성 한 다음 해당 창 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는 대부분 괜찮습니다. 대신 사용자가 기다리는 동안 로딩 메시지 (또는 기타)를 창에 렌더링하려면 데이터 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';

    });
});

링크 요소를 사용 해보고 javascriipt로 클릭하십시오.

<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

사용자가 이벤트를 시작해야한다는 관찰은 첫 번째 부분을 파악하는 데 도움이되었지만 그 후에도 Chrome과 Firefox가 새 창을 차단했습니다. 두 번째 부분은 링크에 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');
});

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

이것은 나를 위해 일했습니다.

내 React 코드에서 팝업 차단기를 피하기 위해이 방법을 사용하고 있습니다. 다른 모든 자바 스크립트 코드에서도 작동합니다.

클릭 이벤트에서 비동기 호출을 할 때 먼저 빈 창을 연 다음 나중에 비동기 호출이 완료 될 때 URL을 작성합니다.

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

비동기 호출이 성공하면 다음을 작성하십시오.

popupWindow.document.write(resonse.url)