Javascript 在后台打开一个新标签页？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10812628/
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 a new tab in the background?
提问by st-boost
Using javascript, I want to open a new page in a different tab, but remain focused on the current tab. I know I can do it like this:
使用 javascript，我想在不同的选项卡中打开一个新页面，但仍专注于当前选项卡。我知道我可以这样做：
open('http://example.com/');
focus();
However, when I do this in chrome, it flashes the new tab for a moment before switching back to the current tab. I want to avoid this.
但是，当我在 chrome 中执行此操作时，它会在切换回当前选项卡之前闪烁一下新选项卡。我想避免这种情况。
The application is a personal bookmarklet, so it only has to work in the latest Chrome.
该应用程序是一个个人书签，所以它只需要在最新的 Chrome 中运行。
回答by Amro
UPDATE: By version 41 of Google Chrome,initMouseEventseemed to have a changed behavior.
更新：到版本 41 的谷歌浏览器，initMouseEvent似乎有一个改变的行为。
this can be done by simulating ctrl+ click(or any other key/event combinations that open a background tab) on a dynamically generated aelement with its hrefattribute set to the desired url
这可以通过在动态生成的元素上模拟ctrl+ click（或打开背景选项卡的任何其他键/事件组合）来完成a，其href属性设置为所需的url
In action:fiddle
在行动：小提琴
function openNewBackgroundTab(){
var a = document.createElement("a");
a.href = "http://www.google.com/";
var evt = document.createEvent("MouseEvents");
//the tenth parameter of initMouseEvent sets ctrl key
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
true, false, false, false, 0, null);
a.dispatchEvent(evt);
}
tested only on chrome
仅在 chrome 上测试
回答by user2837849
THX for this question! Works good for me on all popular browsers:
谢谢这个问题！在所有流行的浏览器上对我都有好处：
function openNewBackgroundTab(){
var a = document.createElement("a");
a.href = window.location.pathname;
var evt = document.createEvent("MouseEvents");
//the tenth parameter of initMouseEvent sets ctrl key
evt.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
true, false, false, false, 0, null);
a.dispatchEvent(evt);
}
var is_chrome = navigator.userAgent.toLowerCase().indexOf('chrome') > -1;
if(!is_chrome)
{
var url = window.location.pathname;
var win = window.open(url, '_blank');
} else {
openNewBackgroundTab();
}
回答by demee
As far as I remember, this is controlled by browser settings. In other words: user can chose whether they would like to open new tab in the background or foreground. Also they can chose whether new popup should open in new tab or just... popup.
据我所知，这是由浏览器设置控制的。换句话说：用户可以选择是在后台还是在前台打开新标签页。他们还可以选择是在新选项卡中打开新弹出窗口还是只是...弹出窗口。
For example in firefox preferences:
例如在 Firefox 首选项中：
Notice the last option.
注意最后一个选项。
回答by Mageek
I did exactly what you're looking for in a very simple way. It is perfectly smooth in Google Chrome and Opera, and almost perfect in Firefox and Safari. Not tested in IE.
我以一种非常简单的方式做了你正在寻找的东西。它在 Google Chrome 和 Opera 中非常流畅，在 Firefox 和 Safari 中几乎完美。未在 IE 中测试。
function newTab(url)
{
var tab=window.open("");
tab.document.write("<!DOCTYPE html><html>"+document.getElementsByTagName("html")[0].innerHTML+"</html>");
tab.document.close();
window.location.href=url;
}
Fiddle : http://jsfiddle.net/tFCnA/show/
小提琴：http: //jsfiddle.net/tFCnA/show/
Explanations:
Let's say there is windows A1 and B1 and websites A2 and B2.
Instead of opening B2 in B1 and then return to A1, I open B2 in A1 and re-open A2 in B1.
(Another thing that makes it work is that I don't make the user re-download A2, see line 4)
说明：
假设有窗口 A1 和 B1 以及网站 A2 和 B2。
我没有在 B1 中打开 B2 然后返回 A1，而是在 A1 中打开 B2 并在 B1 中重新打开 A2。
（使其工作的另一件事是我不会让用户重新下载 A2，请参阅第 4 行）
The only thing you maydoesn't like is that the new tab opens before the main page.
您可能唯一不喜欢的是新选项卡在主页之前打开。
回答by gaurang171
Here is a complete example for navigating valid URL on a new tab with focused.
这是在具有焦点的新选项卡上导航有效 URL 的完整示例。
HTML:
HTML：
<div class="panel">
<p>
Enter Url:
<input type="text" id="txturl" name="txturl" size="30" class="weburl" />
<input type="button" id="btnopen" value="Open Url in New Tab" onclick="openURL();"/>
</p>
</div>
CSS:
CSS：
.panel{
font-size:14px;
}
.panel input{
border:1px solid #333;
}
JAVASCRIPT:
爪哇脚本：
function isValidURL(url) {
var RegExp = /(ftp|http|https):\/\/(\w+:{0,1}\w*@)?(\S+)(:[0-9]+)?(\/|\/([\w#!:.?+=&%@!\-\/]))?/;
if (RegExp.test(url)) {
return true;
} else {
return false;
}
}
function openURL() {
var url = document.getElementById("txturl").value.trim();
if (isValidURL(url)) {
var myWindow = window.open(url, '_blank');
myWindow.focus();
document.getElementById("txturl").value = '';
} else {
alert("Please enter valid URL..!");
return false;
}
}
I have also created a bin with the solution on http://codebins.com/codes/home/4ldqpbw
我还在http://codebins.com/codes/home/4ldqpbw上用解决方案创建了一个 bin
