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

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/12939928/
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

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-29 03:25:45  来源:igfitidea点击:

Make a link open a new window (not tab)

html

提问by conbask

Is there a way to make a link open a new browser window (not tab) without using javascript?

有没有办法让链接在不使用 javascript 的情况下打开一个新的浏览器窗口(不是选项卡)?

采纳答案by Christoph

With pure HTMLyou can't influence this - every modern browser (= the user) has complete control over this behavior because it has been misused a lot in the past...

使用纯 HTML,您无法影响这一点 - 每个现代浏览器(= 用户)都可以完全控制这种行为,因为它在过去被滥用了很多......

HTML option

HTML 选项

You can open a new window (HTML4) or a new browsing context (HTML5). Browsing context in modern browsers is mostly "new tab" instead of "new window". You have no influence on that, and you can't "force" modern browsers to open a new window.

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

In order to do this, use the anchor element's attribute target[1]. The value you are looking for is _blank[2].

为此,请使用锚元素的属性target[1]。您正在寻找的值是_blank[2]

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

JavaScript option

JavaScript 选项

Forcing a new window is possible via javascript - see Ievgen's excellent answer belowfor a javascript solution.

可以通过 javascript 强制打开一个新窗口 -有关 javascript 解决方案,请参阅下面 Ievgen 的优秀答案

(!) However, be aware, that opening windows via javascript (if not done in the onclick event from an anchor element) are subject to getting blocked by popup blockers!

(!) 但是,请注意,通过 javascript 打开窗口(如果不是在来自锚元素的 onclick 事件中完成)可能会被弹出窗口阻止程序阻止!

[1] This attribute dates back to the times when browsers did not have tabs and using framesets was state of the art. In the meantime, the functionality of this attribute has slightly changed (see MDN Docu)

[1] 这个属性可以追溯到浏览器没有选项卡并且使用框架集是最先进的时代。同时,此属性的功能略有变化(参见MDN 文档

[2] There are some other values which do not make much sense anymore (because they were designed with framesets in mind) like _parent, _selfor _top.

[2] 还有一些其他值不再有意义(因为它们的设计考虑了框架集),例如_parent,_self_top

回答by Ievgen Martynov

That will open a new window, not tab (with JavaScript, but quite laconically):

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

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

回答by Cuzi

I know that its bit old Q but if u get here by searching a solution so i got a nice one via jquery

我知道它有点旧 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));

});

it will open all the <a target="_new">in a new window

它将<a target="_new">在新窗口中打开所有内容

EDIT:

编辑:

1st, I did some little changes in the original code now it open the new window perfectly followed the user screen ratio (for landscape desktops)

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

but, I would like to recommend you to use the following code that open the link in new tab if you in mobile(thanks to zvona answer in other question):

但是,如果您使用移动设备,我建议您使用以下代码在新选项卡中打开链接(感谢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;
}

回答by Rahul Tripathi

You can try this:-

你可以试试这个:-

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

and you can try this one also:-

你也可以试试这个:-

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

回答by twodayslate

Browsers control a lot of this functionality but

浏览器控制了很多这样的功能,但是

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

will attempt to open yahoo.com in a new window.

将尝试在新窗口中打开 yahoo.com。