在新窗口中打开页面而不阻止弹出窗口
Posted
技术标签:
【中文标题】在新窗口中打开页面而不阻止弹出窗口【英文标题】:Open page in new window without popup blocking 【发布时间】:2011-10-31 15:10:33 【问题描述】:希望您能在这里提供一些帮助... 我有一个表单,可以翻译字段中的单词,用翻译后的术语填充字段,然后在一个提交按钮中完成所有提交操作。
提交是由 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" 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 ? 有人知道吗?
【问题讨论】:
在关闭弹出窗口阻止程序的情况下是否可以工作。您也可以使用 $("#form1").submit();提交表单而不是 document.forms.form1.submit(); 是的,当我批准弹出窗口时没有问题。如果它是由提交按钮提交而不是 jquery 也不会被视为弹出窗口。 尝试在提交按钮上调用 $("button").click()。 和 $("#form1").submit();什么都没做…… 查看***.com/questions/178964/… 【参考方案1】:如果打开选项卡/弹出窗口的命令来自trusted event,浏览器只会打开没有弹出窗口阻止程序警告的选项卡/弹出窗口。这意味着用户必须主动点击某个地方才能打开一个弹出窗口。
在您的情况下,用户执行了一次点击,因此您拥有受信任的事件。但是,通过执行 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
【讨论】:
这个解决方案似乎不再起作用了。新窗口未打开,Web 控制台显示错误:“主线程上的同步 XMLHttpRequest 已弃用,因为它对最终用户的体验产生不利影响。更多帮助xhr.spec.whatwg.org” 此解决方案适用于我的浏览器并将上述内容显示为警告。 有效,但我收到警告:[弃用] 主线程上的同步 XMLHttpRequest 已弃用,因为它对最终用户的体验产生不利影响。如需更多帮助,请查看xhr.spec.whatwg.org。 async:false 是我的解决方案,谢谢【参考方案2】:这是唯一一个在所有浏览器中真正为我工作的浏览器
let newTab = window.open();
newTab.location.href = url;
【讨论】:
为我工作。谢谢!【参考方案3】:作为一般规则,弹出窗口阻止程序针对在没有用户交互的情况下启动的窗口。通常一个点击事件可以打开一个窗口而不被阻塞。 (除非它是一个非常糟糕的弹出窗口阻止程序)
尝试在点击事件后启动
【讨论】:
【参考方案4】: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');
【讨论】:
如果您仍然想打开一个新窗口,这将起作用。如果 open 是基于回调的条件怎么办。我们将不得不打电话给.close()
,它会创建一个打开/关闭闪光灯......有什么想法吗?【参考方案5】:
对于提交按钮,添加此代码,然后设置您的表单 target="newwin"
onclick=window.open("about:blank","newwin")
【讨论】:
【参考方案6】:function openLinkNewTab (url)
$('body').append('<a id="openLinkNewTab" href="' + url + '" target="_blank"><span></span></a>').find('#openLinkNewTab span').click().remove();
【讨论】:
添加一些解释,说明此答案如何帮助 OP 解决当前问题 在暂存器(Firefox)中快速尝试过,并且(如预期的那样)这触发了我的弹出窗口阻止程序。openLinkNewTab('https://ddg.gg');
以上是关于在新窗口中打开页面而不阻止弹出窗口的主要内容,如果未能解决你的问题,请参考以下文章