在单击事件期间 window.open 弹出窗口被阻止

IT技术 javascript jquery window
2021-02-20 09:19:12

我最终需要做的是运行一个$.ajax()调用，然后在运行之后打开一个新窗口。

用户单击保存当前表单的“预览”按钮，然后打开一个新窗口，该窗口显示带有刚刚保存的数据的项目的预览。

但按原样，该window.open功能会被弹出窗口阻止程序阻止。

这是我的代码的基本部分：

HTML：

<a href="/surveys/185/preview" class="preview" target="_blank">Preview</a>

JavaScript：

$('.preview').live('click', function(event){
  save_survey($(this).attr('href'));
  event.preventDefault();
});

function save_survey(url) {
  $.ajax({
    type: "POST",
    url: form_url,
    dataType: 'json',
    data: form_data,
    success: function(data) {
      window.open(url, '_blank');
    }
  });
}
5个回答

我最近遇到了这个问题并找到了这个解决方法：

1）window.open在调用之前调用$.ajax并保存窗口引用：

var newWindow = window.open(...);

2) 关于location保存的窗口引用的回调设置属性：

newWindow.location = url;

也许它也会帮助你。

这是非常聪明的。我认为没有希望。
2021-04-24 09:19:12
谢谢，你是我的英雄，爱你
2021-05-10 09:19:12
实际上，这似乎不再起作用了。有人可以确认这是不可能的吗？
2021-05-15 09:19:12
对于那些发现这不起作用的人，我注意到如果不是由用户启动的事件触发， window.open 可以返回 null：stackoverflow.com/a/18401663/1415038。
2021-05-17 09:19:12
@IgorDymov 这似乎适用于主要浏览器。你能详细说明为什么这有效。
2021-05-20 09:19:12

弹出窗口阻止程序通常会阻止显示的每个弹出窗口，而不是由直接用户操作触发，例如单击按钮或链接。

如果您在点击事件上使用 ajax 请求，则该请求会与点击事件异步触发，这就是为什么当 ajax 请求完成其工作并且您收到来自请求的响应的事件时，您已经失去了机会触发 window.open 没有弹出窗口阻止程序妨碍，原来的点击事件到那时已经死了。

根据这篇文章，看起来您必须直接响应点击来打开窗口（以避免被弹出窗口阻止程序击中），而不是等到 AJAX 调用完成才能打开新窗口。

我通过使 Ajax 调用同步解决了我的问题。例如（使用 jQuery）：

$("form").submit(function(e){
    e.preventDefault();
    $.ajax({
      async: false,
      url: ...,
      data: ...,
      success: function(results){
          if(results.valid){
              window.open(...);
          }
      }
    });
    return false;
  });

const newWin = window.open(`${BASE_URL}`, 'expampleName')
if (newWin) {
  newWin.onload = () => {
    const currentOpenWindow = newWin
    const href = newWin.location.href
  }
}
你能解释一下，这是如何回答这个问题的吗？
2021-04-26 09:19:12
如果您解释为什么这是首选解决方案并解释它是如何工作的，它会更有帮助。我们想要教育，而不仅仅是提供代码。
2021-05-04 09:19:12
其它你可能感兴趣的问题
上一篇如何在textarea上捕获输入键而不是shift + enter？ 下一篇使用 Google Maps API 添加标记功能