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

acruukt9  于 2023-10-14  发布在  Java
关注(0)|答案(7)|浏览(168)

希望你能帮上一点忙……我有一个表格,翻译一个字在一个领域,填充字段与翻译的长期,然后做提交行动都在一个提交按钮。
提交是由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?有人知道如何?

kxkpmulp

kxkpmulp1#

如果打开选项卡/弹出窗口的命令来自可信事件,则浏览器将仅在没有弹出窗口阻止程序警告的情况下打开选项卡/弹出窗口。这意味着用户必须主动点击某个地方才能打开弹出窗口。
在您的示例中,用户执行单击,因此您拥有可信事件。但是,通过执行Ajax请求,您确实会丢失可信上下文。您的成功处理程序不再具有该事件。避免这种情况的唯一方法是执行同步Ajax请求,这将在浏览器运行时阻止浏览器,但将保留事件上下文。
在jQuery中,这应该可以做到:

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

以下是你的答案:Open new tab without popup blocker after ajax call on user click

cidc1ykv

cidc1ykv2#

这是唯一一个实际上为我工作的所有浏览器
let newTab = window.open(); newTab.location.href = url;

t2a7ltrp

t2a7ltrp3#

作为一般规则,弹出窗口拦截器针对的是在没有用户交互的情况下启动的窗口。通常一个点击事件 * 可以 * 打开一个窗口而不被阻止。(除非它是一个非常糟糕的弹出窗口拦截器)
尝试在单击事件后启动

axr492tv

axr492tv4#

PS>我在一个相关的问题上发表了这个答案。下面是我如何解决我的Apache请求丢失可信上下文的问题:
我直接在用户点击时打开弹出窗口,将URL指向about:blank,并在该窗口上获得一个句柄。你可能会直接弹出到一个'加载'的网址,而您的aplog请求是
var myWindow = window.open("about:blank",'name','height=500,width=550');
然后,当我的请求成功时,我在窗口中打开我的回调URL

function showWindow(win, url) {
     win.open(url,'name','height=500,width=550');
}
fzsnzjdm

fzsnzjdm5#

对于Submit按钮,添加以下代码,然后设置表单target=“newwin”

onclick=window.open("about:blank","newwin")
hivapdat

hivapdat6#

我的情况有点复杂,因为我最初的用户交互是

  • 按钮点击
  • 触发了一个事件处理程序
  • 它调用了一个方法
  • 它回报了一个承诺
  • 里面有一个匿名电话
  • 当这个promise被实现时,实际上应该打开URL。

我让它正确工作的唯一方法是按照here建议的两个步骤:

function someFunctionThatsCalledByUserClick(){
    return new Promise((resolve, reject)=>{
        let newTab = window.open();     // <-- always open new tab
        return ajax_wrapper_func().then( data => {
            let url = extract_url(data);
            newTab.location.href = url;     // <-- set the url
            resolve();
        }).catch(e=>{
            newTab.close();     // <-- remove the tab on errors
            reject(e);
        });
    });
}
tktrz96b

tktrz96b7#

function openLinkNewTab (url){
    $('body').append('<a id="openLinkNewTab" href="' + url + '" target="_blank"><span></span></a>').find('#openLinkNewTab span').click().remove();
}

相关问题