在新窗口中打开页面而不阻止弹出窗口

IT技术 javascript jquery popup
2021-01-31 15:53:37

希望你能在这里提供一点帮助...我有一个表格，可以在一个字段中翻译一个词，用翻译的术语填充该字段，然后在一个提交按钮中执行所有提交操作。

提交是由 jquery 进行的。问题是目标页面被阻止，因为所有 3 个主要浏览器都将其视为弹出窗口，您知道如何让它作为新选项卡或新窗口打开吗？我不想将目标设置为 _self，因为我希望人们也打开我的网站。

我相信问题出在这个字符串中：

document.forms.form1.submit();

但我也知道应该有一种方法来改写它，这样目标就不会被视为弹出窗口。

这是脚本： 

<script type="text/javascript">

$(function transle() {
  $('#transbox').sundayMorningReset();
  $('#transbox input[type=button]').click(function(evt) {
    $.sundayMorning(
      $('#transbox input[type=text]').val(), {
        source: '',
        destination: 'ZH',
        menuLeft: evt.pageX,
        menuTop: evt.pageY
      },
      function(response) {
        $('#transbox input[type=text]').val(response.translation);

        //document.getElementById("form1").submit();
        document.forms.form1.submit();

      }
    );
  });
});

</script>

这是表格：

<table id="transbox" name="transbox" width="30px" border="0" cellspacing="0" cellpadding="0">
  <form action="custom-page" method="get" name="form1" target="_blank" id="form1">

    <tr>
      <td>
        <input id="q" name="q" type="text" class="search_input" onFocus="if (this.value == 'Evening dress') {this.value = '';}" onBlur="if (this.value == '') {this.value = 'Evening dress';}" value="Evening dress" />
      </td>
      <td>
        <input type="button" value="Find" style="color: #333; width: 157px; font-weight:bold"></input>
      </td>
    </tr>

  </form>
</table>

编辑

我已经尝试了所有这些字符串来提交： 

document.getElementById("form1").submit();
document.forms.form1.submit();
form1.submit();

所有最终目标都被弹出窗口阻止。请问，有没有其他方法可以让代码不让它弹出？

也许应该使用 onsubmit 来制作 jQuery ？有人知道如何吗？

6个回答

如果打开选项卡/弹出窗口的命令来自受信任的事件，浏览器将只打开一个选项卡/弹出窗口而不会弹出弹出窗口阻止程序警告。这意味着用户必须主动点击某处才能打开弹出窗口。

在您的情况下，用户执行单击操作，以便您获得受信任的事件。但是，通过执行 Ajax 请求，您确实失去了可信上下文。您的成功处理程序不再有该事件。避免这种情况的唯一方法是执行同步 Ajax 请求，该请求将在浏览器运行时阻塞浏览器，但会保留事件上下文。

在 jQuery 中，这应该可以解决问题：

$.ajax({
 url: 'http://yourserver/',
 data: 'your image',
 success: function(){window.open(someUrl);},
 async: false
});

这是您的答案：在用户单击 ajax 调用后打开没有弹出窗口阻止程序的新选项卡

此解决方案似乎不再起作用。新窗口未打开，Web 控制台显示错误：“主线程上的同步 XMLHttpRequest 已被弃用，因为它对最终用户的体验产生不利影响。有关更多帮助xhr.spec.whatwg.org ”
2021-03-14 15:53:37
有效，但我收到警告：[弃用] 主线程上的同步 XMLHttpRequest 已弃用，因为它对最终用户的体验有不利影响。如需更多帮助，请查看xhr.spec.whatwg.org。
2021-03-23 15:53:37
此解决方案适用于我的浏览器，并将上述内容显示为警告。
2021-03-27 15:53:37

这是唯一一个在所有浏览器中真正对我有用的

let newTab = window.open(); newTab.location.href = url;

为我工作。谢谢！
2021-03-20 15:53:37

作为一般规则，弹出阻止程序的目标是在没有用户交互的情况下启动的窗口。通常单击事件可以打开一个窗口而不会被阻止。（除非它是一个非常糟糕的弹出窗口拦截器）

尝试在点击事件后启动

PS> 我在一个相关问题上发布了这个答案。以下是我如何解决异步 ajax 请求丢失可信上下文的问题：

我直接在用户点击时打开了弹出窗口，将 url 定向到about:blank并获得了该窗口的句柄。您可以在发出 ajax 请求时将弹出窗口定向到“正在加载”网址

var myWindow = window.open("about:blank",'name','height=500,width=550');

然后，当我的请求成功时，我在窗口中打开我的回调 url 

function showWindow(win, url) {
     win.open(url,'name','height=500,width=550');
}
如果您无论如何都想打开一个新窗口，这将起作用。如果打开是基于回调的条件呢？我们将不得不打电话.close()，它会创建一个打开/关闭的flash....有什么想法吗？
2021-04-03 15:53:37

对于提交按钮，添加此代码，然后设置您的表单 target="newwin"

onclick=window.open("about:blank","newwin")
其它你可能感兴趣的问题
上一篇嵌套在 div 标签中时，地图未显示在 Google Maps JavaScript API v3 上 下一篇Javascript - 在单个数组中生成所有元素组合（成对）