让一个链接打开一个新窗口(而不是选项卡)

有没有一种方法可以让一个链接打开一个新的浏览器窗口(而不是选项卡)而不使用 javascript？

490360 次浏览
小开
最佳答案

使用纯 HTML 你不能影响这一点——每个现代浏览器(= 用户)都能完全控制这一行为，因为它在过去被滥用了很多次..。

HTML 选项

您可以打开一个新窗口(HTML4)或一个新的浏览上下文(HTML5)。在现代浏览器中浏览上下文主要是“新标签”而不是“新窗口”。您对此没有影响，而且您不能“强迫”现代浏览器打开一个新窗口。

为此，请使用 锚定元件的属性 target[1]。您要查找的值是 _blank[2]。

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

JavaScript 选项

通过 javascript 强制创建一个新窗口是可能的——参见 Ievgen 在下面给出了很好的答案获得 javascript 解决方案。

(!)然而，请注意，通过 javascript 打开窗口(如果没有在锚元素的 onclick 事件中完成)会受到弹出窗口阻塞器的阻止！

[1]这个属性可以追溯到浏览器没有制表符和使用框架集的时代。与此同时，这个属性的功能略有改变(参见 MDN 文件)

[2]还有一些其他的值已经没有多大意义了(因为它们是按照框架集设计的) ，比如 _parent、 _self或者 _top。

小开

你可以试试这个:-

   <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>
小开

这将打开一个新窗口，而不是选项卡(使用 JavaScript，但相当简洁) :

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

我知道这有点老 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">

编辑:

首先，我对原来的代码做了一些小的改动，现在它打开了新窗口，完美地遵循了用户屏幕比例(对于横向桌面)

但是，如果你在 手机(感谢 Zvona 在另一个问题中的回答)中，我建议你使用下面的代码在新标签页中打开链接:

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

提交答案