建立一個鏈接打開一個新窗口（不是選項卡）

106

純HTML你不能影響這一點 - 所有現代瀏覽器（=用戶）擁有這種行爲完全控制，因爲它已經被濫用了很多過去......

anchor元素有一個屬性target *。您正在尋找的價值是_blank **。

<a href="www.example.com/example.html" target="_blank">link text</a>

它打開一個新窗口（HTML4）或一個新的瀏覽上下文（HTML5）。但是，現代瀏覽器中的瀏覽上下文大多是「新標籤」而不是「新窗口」。你沒有影響，你不能「強制」瀏覽器打開一個新的窗口。

另一方面，強制一個新的窗口是可能的通過JavaScript - 見JavaScript解決方案Ievgen的答案。但是，請注意，通過JavaScript打開窗口（如果未在來自錨元素的onclick事件中完成）可能會被彈出窗口攔截器阻止！

（*）該屬性的歷史可以追溯到瀏覽器沒有標籤並且使用框架集的最新技術。在此期間，該屬性的功能已略有改變（見MDN Docu）

（**）有這沒有太大的意義了（因爲它們是設計時考慮的框架集），如_parent一些其他值，_self或_top。

來源

2012-10-17 17:29:07 Christoph

+2

似乎在2015年的Safari 9.0 –

+0

@StefanHuska可以不工作，我想我解釋說，很清楚在我的答案是：*，希望爲正確的瀏覽器設置* - 如果您的瀏覽器被配置爲在新標籤頁中打開鏈接，但從html的角度來看，您無能爲力。這不是一年或瀏覽器的問題，現在大多數現代瀏覽器都在新標籤中打開。你需要像Ievgen這樣的javascript解決方案。 – Christoph

+0

谷歌瀏覽器和火狐不工作（IE支持） –

0

瀏覽器控制這個功能很多，但

<a href="http://www.yahoo.com" target="_blank">Go to Yahoo</a>

將嘗試在新窗口中打開yahoo.com。

來源

2012-10-17 17:28:28 twodayslate

1

你可以試試這個： -

<a href="some.htm" target="_blank">Link Text</a>

，你也可以試試這個： -

<a href="some.htm" onclick="if(!event.ctrlKey&&!window.opera){alert('Hold the Ctrl Key');return false;}else{return true;}" target="_blank">Link Text</a>

來源

2012-10-17 17:30:43

181

這將打開一個新窗口，而不是標籤（用JavaScript，但相當簡潔地）：

<a href="print.html" 
    onclick="window.open('print.html', 
         'newwindow', 
         'width=300,height=250'); 
       return false;" 
>Print</a>

來源

2013-04-02 14:07:09

+4

根據OP的「沒有javascript」的定義（這個答案使用JS，但沒有包含任何JS文件或

24

我知道它的老Q，但如果你通過搜索解決方案來到這裏，所以我通過jquery得到了一個很好的

jQuery('a[target^="_new"]').click(function() { 
    var width = window.innerWidth * 0.66 ; 
    // define the height in 
    var height = width * window.innerHeight/window.innerWidth ; 
    // Ratio the hight to the width as the user screen ratio 
    window.open(this.href , 'newwindow', 'width=' + width + ', height=' + height + ', top=' + ((window.innerHeight - height)/2) + ', left=' + ((window.innerWidth - width)/2)); 

});

它會在一個新窗口

編輯打開所有<a target="_new">：

月1日，我在原來代碼中的一些小的變化，現在它打開新窗口完全是按用戶屏幕比例（對於風景桌面）

但是，我想推薦您使用以下代碼打開新標籤中的鏈接，如果您在手機（感謝zvona answer in other question）：

jQuery('a[target^="_new"]').click(function() { 
    return openWindow(this.href); 
} 


function openWindow(url) { 

    if (window.innerWidth <= 640) { 
     // if width is smaller then 640px, create a temporary a elm that will open the link in new tab 
     var a = document.createElement('a'); 
     a.setAttribute("href", url); 
     a.setAttribute("target", "_blank"); 

     var dispatch = document.createEvent("HTMLEvents"); 
     dispatch.initEvent("click", true, true); 

     a.dispatchEvent(dispatch); 
    } 
    else { 
     var width = window.innerWidth * 0.66 ; 
     // define the height in 
     var height = width * window.innerHeight/window.innerWidth ; 
     // Ratio the hight to the width as the user screen ratio 
     window.open(url , 'newwindow', 'width=' + width + ', height=' + height + ', top=' + ((window.innerHeight - height)/2) + ', left=' + ((window.innerWidth - width)/2)); 
    } 
    return false; 
}

來源

2014-04-09 12:39:17 Cuzi

+0

'top = 300，left = 350'謝謝你的這一行！ :) – sohaiby

+1

OP請求「無javascript」，但jQuery基於javascript。 – Sablefoste

+0

你說得對，但要麼沒有其他解決方案，這是更優雅。它反映了文檔的原始行爲。如果你不想要JavaScript解決方案？你可以像Christoph的答案那樣使用'_blank'。 – Cuzi

相關問題

建立一個鏈接打開一個新窗口（不是選項卡）

回答

相關問題