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

我想在超链接的单击事件上有条件地显示JQuery对话框

我有一个类似于条件1的要求打开JQuery对话框，如果条件1未满足，则导航到“href”标记所引用的页面，其单击事件有问题

我能够在link的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阻止程序不会阻止页面，但是对于条件1，它会打开对话框并打开“href”页面

如果我解决了一个问题，就会给另一个带来问题。我不能同时公正地对待这两种情况

你能帮我解决这个问题吗

一旦解决了这个问题，我还有另一个问题需要解决，即对话框OK事件的导航：）
弹出窗口拦截器通常只允许
窗口。如果在处理用户事件（如单击）期间使用，则打开
。在您的情况下，您正在调用
窗口。请稍后打开
，不要在事件期间打开，因为
$.getJSON
是异步的

您有两个选择：

执行其他操作，而不是
窗口。打开

使ajax调用同步，这是您通常应该避免的事情，就像瘟疫一样，因为它会锁定浏览器的UI<代码>$。getJSON
相当于：

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

…因此，您可以通过将参数映射到上面并添加
async:false
，使
$.getJSON
调用同步：

$.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的更改，实时链接不再工作）

下面是一个使用同步调用确实有效的示例：

|（由于JSBin的更改，实时链接不再工作）


只有在用户直接执行某些操作时，才能调用window.open而不阻塞浏览器。
浏览器发送一些标志并确定用户操作打开的窗口

因此，您可以尝试以下场景：

var myWindow=window.open（“”）
在此窗口中绘制任何加载消息
请求完成后，只需调用myWindow.location=''即可
这个事件必须由用户发起的观察结果帮助我弄清楚了第一部分，但即使在那之后，Chrome和Firefox仍然阻止了新窗口。第二部分是在链接中添加target=“_blank”，一条评论中提到了这一点

总之：您需要从用户启动的事件调用window.open，在这种情况下，单击链接，该链接需要有target=“\u blank”

在下面的示例中，链接使用class=“button twitter”

试试这个，对我有用

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

我遇到了这个问题，在回调返回一些数据之前，我没有准备好我的url。解决方案是在启动回调之前打开空白窗口，然后在回调返回时设置位置

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

必须在与用户启动的事件相同的堆栈（aka）上创建窗口，例如单击回调，因此以后不能异步创建窗口

但是，您可以创建一个没有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基本上是好的。如果您希望在用户等待时将加载消息（或任何内容）呈现到窗口中，则可以使用

window.open（'data:text/html，正在加载…'）；
此代码帮助我。希望这能帮助一些人

$('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';

    });
});

尝试使用链接元素，并使用JavaScript单击它

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

像这样使用它

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

这对我很有效。
我使用此方法来避免React代码中的弹出窗口阻止程序。它也适用于所有其他javascript代码

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

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

尽量不要使用.live和指向.on（）的指针@艾维普：就像上次别人对你说的，只有1.7以上。很多项目仍将在1.5或1.6上。Downvoter：仅仅因为你不喜欢弹出窗口，这并不意味着这个问题应该被否决。如果某个问题“……没有显示任何研究成果；如果不清楚或没有用处”，则应否决该问题。这个问题很清楚，看起来并不懒惰，而且源于各种因素的组合。@t.J.Crowder：他没有指定他使用的版本。所以我应该考虑他正在使用最新的版本。如果他使用的是另一个版本，我相信他会提到这一点，因为这样他就会意识到live已被弃用，并会解释他使用.live（）的原因。没有人告诉过我“最后一次”是什么时候，所以我觉得你应该休息一下，冷静下来。没有必要这么严厉……我没有收到任何通知。但是如果有人没有指定他们的版本来考虑他们使用的是最新的，这不是很正常吗？我的意思是我必须使用1.3是有原因的，而且我知道有一个更新更好的版本。非常感谢。你提出的让电话同步的建议很有效。在我下一期可能的对话OK事件中处理导航时，这也帮了我的忙。T.J.Crowder留下了两个问题，分别是[1.查找窗口的替代项。打开]和[2.避免ajax同步调用]建议
$('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';

    });
});

<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";

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

popupWindow.document.write(resonse.url)