设置JQuery event.preventDefault（）时，跳过window.open上的弹出窗口阻止程序

我想在超链接的click事件上有条件地显示一个JQuery对话框。

我有一个条件，例如关于condition1的请求，请打开一个JQuery对话，如果不满足condition1的条件，请导航到该问题的“ href”标记所引用的页面。

我可以在链接的click事件上调用函数。现在，该函数通过执行另一个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();从代码中删除，popoup阻止程序不会阻止该页面，但是对于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通过映射你的PARAMS以上，加入通话同步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);
           }
       }
   });

   再说一次，如果您能找到其他实现目标的方法，我不提倡同步ajax调用。但是，如果做不到，那就去吧。

   这是由于异步调用而导致测试失败的代码示例：

   现场示例 | 实时源 （由于对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，就可以更改它，甚至可以是异步的！

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 URIs。

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代码中的弹出窗口阻止程序。它也可以在所有其他javascript代码中使用。

当您在点击事件上进行异步调用时，只需先打开一个空白窗口，然后在异步调用完成时在其中写入URL。

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

在异步调用成功后，编写以下内容

popupWindow.document.write(resonse.url)