Javascript 在新窗口中打开页面而不阻止弹出窗口
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/7139103/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Open page in new window without popup blocking
提问by li.
Hope you can help a bit here... I have a form that translate a word in a field, populate the field with the translated term and then do submit action all in one submit button.
希望你能在这里提供一点帮助......我有一个表格，可以在一个字段中翻译一个单词，用翻译的术语填充该字段，然后在一个提交按钮中执行所有提交操作。
the submit is being made by jquery. problem is the target page is being blocked as all 3 major browsers treat it as popup, Do you know how to let it open just as a new tab or new window ? I don't want to set the target as _self as I want people to have my site open as well.
提交是由 jquery 进行的。问题是目标页面被阻止，因为所有 3 个主要浏览器都将其视为弹出窗口，您知道如何让它作为新选项卡或新窗口打开吗？我不想将目标设置为 _self，因为我希望人们也打开我的网站。
I believe the problem is in this string:
我相信问题出在这个字符串中：
document.forms.form1.submit();
but I also know there should be a way to rephrase it so the target won't be treated as a popup.
但我也知道应该有一种方法来改写它，这样目标就不会被视为弹出窗口。
this is the script:
这是脚本：
<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>
and this is the form:
这是表格：
<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>
EDIT
编辑
I have tried all of these strings to submit:
我已经尝试了所有这些字符串来提交：
document.getElementById("form1").submit();
document.forms.form1.submit();
form1.submit();
all ends up with the target being popup blocked. please, is there any other way I should do the code to not let it popup ?
所有最终目标都被弹出窗口阻止。请问，有没有其他方法可以让代码不让它弹出？
maybe should use the onsubmit to make jQuery ? someone knows how ?
也许应该使用 onsubmit 来制作 jQuery ？有人知道如何吗？
回答by B?o Nam
A browser will only open a tab/popup without the popup blocker warning if the command to open the tab/popup comes from a trusted event. That means the user has to actively click somewhere to open a popup.
如果打开选项卡/弹出窗口的命令来自受信任的事件，则浏览器将仅打开选项卡/弹出窗口而不会弹出弹出窗口阻止程序警告。这意味着用户必须主动点击某处才能打开弹出窗口。
In your case, the user performs a click so you have the trusted event. You do lose that trusted context, however, by performing the Ajax request. Your success handler does not have that event anymore. The only way to circumvent this is to perform a synchronous Ajax request which will block your browser while it runs, but will preserve the event context.
在您的情况下，用户执行单击操作，因此您拥有受信任的事件。但是，通过执行 Ajax 请求，您确实失去了可信上下文。您的成功处理程序不再有该事件。避免这种情况的唯一方法是执行同步 Ajax 请求，该请求将在浏览器运行时阻塞浏览器，但会保留事件上下文。
In jQuery this should do the trick:
在 jQuery 中，这应该可以解决问题：
$.ajax({
url: 'http://yourserver/',
data: 'your image',
success: function(){window.open(someUrl);},
async: false
});
Here is your answer: Open new tab without popup blocker after ajax call on user click
回答by Coomie
As a general rule, pop up blockers target windows that launch without user interaction. Usually a click event canopen a window without it being blocked. (unless it's a really bad popup blocker)
作为一般规则，弹出阻止程序的目标是在没有用户交互的情况下启动的窗口。通常一个点击事件可以打开一个窗口而不会被阻止。（除非它是一个非常糟糕的弹出窗口拦截器）
Try launching after a click event
尝试在点击事件后启动
回答by pomobc
This is the only one that actually worked for me in all the browsers
这是唯一一个在所有浏览器中真正对我有用的
let newTab = window.open();
newTab.location.href = url;
let newTab = window.open();
newTab.location.href = url;
回答by wsgeorge
PS> I posted this answer on a related question. Here's how I got round the issue of my async ajax request losing the trusted context:
PS> 我在一个相关问题上发布了这个答案。以下是我如何解决异步 ajax 请求丢失可信上下文的问题：
I opened the popup directly on the users click, directed the url to about:blankand got a handle on that window. You could probably direct the popup to a 'loading' url while your ajax request is made
我直接在用户点击时打开了弹出窗口，将 url 定向到about:blank并获得了该窗口的句柄。您可以在发出 ajax 请求时将弹出窗口定向到“正在加载”网址
var myWindow = window.open("about:blank",'name','height=500,width=550');
var myWindow = window.open("about:blank",'name','height=500,width=550');
Then, when my request is successful, I open my callback url in the window
然后，当我的请求成功时，我在窗口中打开我的回调 url
function showWindow(win, url) {
win.open(url,'name','height=500,width=550');
}
回答by Alan Gochin
For the Submit button, add this code and then set your form target="newwin"
对于提交按钮，添加此代码，然后设置您的表单 target="newwin"
onclick=window.open("about:blank","newwin")
回答by Леонид Букарев
function openLinkNewTab (url){
$('body').append('<a id="openLinkNewTab" href="' + url + '" target="_blank"><span></span></a>').find('#openLinkNewTab span').click().remove();
}
