设置了JQuery event.preventDefault()时，跳过window.open上的弹出窗口阻止程序 [英] Bypass popup blocker on window.open when JQuery event.preventDefault() is set

问题描述

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

I want to show a JQuery dialog conditionally on click event of an hyperlink .

我有一个条件，例如在condition1上打开一个JQuery对话，如果不满足condition1，请导航到有问题的点击事件的"href"标记所引用的页面.

I have a requirement like on condition1 open a JQuery dialogue and if condition1 is not satisfied, navigate to the page as referenced by 'href' tag of whose click event is in question.

我能够在链接的click事件上调用一个函数.现在，该函数通过执行另一个URL(执行我的Spring控制器并返回响应)来检查上述条件.

I am able to call a function on link's click event. This function now checks the said condition by executing another URL (that executes my Spring controller and returns response).

所有功能都完美，只有window.open被弹出窗口阻止程序阻止.

All works perfect with only window.open being blocked by popup blocker.

$('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"页面.

If I remove e.preventDefault(); from code, popoup blocker doesn't block the page, however for condition1 it then opens the dialogue as well as opens the 'href' page.

如果我解决一个问题，则会为另一个问题.我无法同时兼顾这两种情况.

If I solve one, it creates issue for another. I am not able to give justice to both conditions simultaneously.

您能帮我解决这个问题吗?

Could you help me solve this issue please?

此问题解决后，我还有另一个问题要解决，即导航对话的OK事件:)

Once this is solved I have another issue to solve i.e. navigation on dialogue's OK event :)

推荐答案

在 处理用户事件(如点击)时，弹出窗口阻止程序通常仅允许window.open.就您而言，您正在呼叫window.open 以后，而不是在活动期间进行，因为$.getJSON是异步的.

Popup blockers will typically only allow window.open if used during the processing of a user event (like a click). In your case, you're calling window.open later, not during the event, because $.getJSON is asynchronous.

您有两个选择:

1. 执行其他操作，而不是执行window.open.

使ajax调用同步化，这通常应该避免像瘟疫之类的事情，因为它会锁定浏览器的UI. $.getJSON等效于:

Make the ajax call synchronous, which is something you should normally avoid like the plague as it locks up the UI of the browser. $.getJSON is equivalent to:

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

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

...and so you can make your $.getJSON call synchronous by mapping your params to the above and adding 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调用.但是，如果做不到，那就去吧.

Again, I don't advocate synchronous ajax calls if you can find any other way to achieve your goal. But if you can't, there you go.

下面是由于异步调用而导致测试失败的代码示例:

Here's an example of code that fails the test because of the asynchronous call:

实时示例 | 实时源 (由于对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");
    });
  });
});

这是一个使用同步调用起作用的示例:

And here's an example that does work, using a synchronous call:

实时示例 | 实时源代码 (由于对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");
      }
    });
  });
});

这篇关于设置了JQuery event.preventDefault()时，跳过window.open上的弹出窗口阻止程序的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！