Question

单击其中一个页面上的超链接会打开一个JQuery对话框单击取消按钮将关闭对话框单击“确认”按钮将关闭对话框，并在新的浏览器窗口中打开单击的超链接的URL。

这是有效的，但是当关闭新的浏览器窗口时，仍然可以在瞬间看到对话框（应该已经关闭）。这种情况大多数情况发生在Chrome 46（在Windows 7上），但并非总是如此。 Android上的Chrome浏览器的延迟甚至更长它也出现在Opera 33中，但不像Chrome中那样经常发生在IE 11以及我的三星Galaxy Tab S2的原生浏览器中，我无法重现这个问题，它的工作原理应该如此。

我正在寻找解决此问题的方法......

http://jsfiddle.net/myt661hz/

HTML：

<div id="dialog" title="Confirmation Required" style="display: none;">
    Continue to your preferred technology site?
</div>
<a class="confirmLink" href="http://www.techradar.com" target="_blank">Techradar</a> OR
<a class="confirmLink" href="http://www.trustedreviews.com" target="_blank">Trusted reviews</a>

JAVASCRIPT：

$(document).ready(function() {
    $("#dialog").dialog({
    autoOpen: false,
    modal: true
    });
});

$(".confirmLink").click(function(e) {
    e.preventDefault();
    var targetUrl = $(this).attr("href");

$("#dialog").dialog({
    buttons: {
        "Confirm": function() {
            $(this).dialog("close");
            window.open(targetUrl, '_blank');
        },
        "Cancel": function() {
            $(this).dialog("close");
        }
    }
});

$("#dialog").dialog("open");
});

Answer 1

尝试将window.open调用包裹在setTimeout中，以便为调用提供自己的主题。

setTimeout(function () {
  window.open(targetUrl, '_blank');
}, 0);

这样可以防止对话框关闭操作被新浏览器选项卡的外观和焦点阻挡。

传入setTimeout的零会导致它立即执行。

---编辑---

在window.open内使用setTimeout会导致IE提示用户确认他们希望窗口打开。

要避免在window.open内调用setTimeout，请尝试使用close处理程序打开窗口：

$(document).ready(function() {
    $("#dialog").dialog({
      autoOpen: false,
      modal: true,
      open: function( event, ui ) {
        // ensure 'targetUrl' is cleared on open
        $(this).data('targetUrl', null);
      },
      close: function( event, ui ) {
        // if 'targetUrl' has been set, open in new window
        var targetUrl = $(this).data('targetUrl');
        if(targetUrl) {
          $(this).data('targetUrl', null);
          window.open(targetUrl, '_blank');
        }
      }
    });
});

$(".confirmLink").click(function(e) {
  e.preventDefault();
  var targetUrl = $(this).attr("href");

  $("#dialog").dialog({
    buttons: {
        "Confirm": function() {
            $(this).data('targetUrl', targetUrl).dialog("close");
        },
        "Cancel": function() {
            $(this).data('targetUrl', null).dialog("close");
        }
    }
  });

  $("#dialog").dialog("open");
});

Answer 2

这两个动作都发生了，所以在关闭它打开窗口的对话框之前。浏览器的行为，DOM只有在焦点时才会更新。使用setTimeout避免所需的时间延迟。也请参考下面的jsfiddle链接。

$(this).dialog("close"); setTimeout(function(){window.open(targetUrl, '_blank');},1);

http://jsfiddle.net/myt661hz/8/

如果在新的浏览器窗口后面，JQuery对话框关闭滞后

2 个答案: