在后台打開一個新標簽？

Question

使用 javascript，我想在不同的選項卡中打開一個新頁面，但仍然專注於當前選項卡。 我知道我可以這樣做：

open('http://example.com/');
focus();

但是，當我在 chrome 中執行此操作時，它會在切換回當前選項卡之前閃爍新選項卡片刻。 我想避免這種情況。

該應用程序是一個個人書簽，因此它只需要在最新的 Chrome 中運行。

Answer 1

更新：通過 Google Chrome 的 41 版， initMouseEvent的行為似乎發生了變化，因此這個答案不再有效。 感謝@ Daniel Andersson的評論。

這可以通過在動態生成a元素上模擬ctrl + click （或任何其他打開背景選項卡的鍵/事件組合）來完成，並將其href屬性設置為所需的url

在行動：小提琴

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);
}

僅在 chrome 上測試

Answer 2

這適用於所有流行的瀏覽器：

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();
}

Answer 3

據我記得，這是由瀏覽器設置控制的。 換句話說：用戶可以選擇是在后台還是前台打開新標簽。 他們還可以選擇新的彈出窗口是否應該在新選項卡中打開或只是...彈出窗口。

例如在 Firefox 首選項中：

火狐設置示例

注意最后一個選項。

Answer 4

我以非常簡單的方式完成了您正在尋找的事情。 它在 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;
}

小提琴：http: //jsfiddle.net/tFCnA/show/

說明：
假設有窗口 A1 和 B1 以及網站 A2 和 B2。
我不是在 B1 中打開 B2，然后返回 A1，而是在 A1 中打開 B2，然后在 B1 中重新打開 A2。
（使它起作用的另一件事是我不讓用戶重新下載 A2，見第 4 行）

^{您可能不喜歡的唯一一件事是新選項卡在主頁之前打開。}

Answer 5

這是一個完整的示例，用於在具有焦點的新選項卡上導航有效 URL。

HTML：

<div class="panel">
  <p>
    Enter Url: 
    <input type="text" id="txturl" name="txturl" size="30" class="weburl" />
    &nbsp;&nbsp;    
    <input type="button" id="btnopen"  value="Open Url in New Tab" onclick="openURL();"/>
  </p>
</div>

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;
    }
}

我還使用http://codebins.com/codes/home/4ldqpbw上的解決方案創建了一個 bin

在后台打開一個新標簽？

問題描述

5 個解決方案

解決方案1
109 已采納 2012-07-09 04:35:39

解決方案2
8 2014-04-04 09:06:27

解決方案3
1 2012-07-03 14:59:08

解決方案4
0 2012-07-04 23:14:26

解決方案5
-3 2012-07-03 12:03:46

在后台打開一個新標簽？

問題描述

5 個解決方案

解決方案1 109 已采納 2012-07-09 04:35:39

解決方案2 8 2014-04-04 09:06:27

解決方案3 1 2012-07-03 14:59:08

解決方案4 0 2012-07-04 23:14:26

解決方案5 -3 2012-07-03 12:03:46

解決方案1
109 已采納 2012-07-09 04:35:39

解決方案2
8 2014-04-04 09:06:27

解決方案3
1 2012-07-03 14:59:08

解決方案4
0 2012-07-04 23:14:26

解決方案5
-3 2012-07-03 12:03:46