创建一个链接打开一个新窗口(不是选项卡)[复制]

时间:2022-01-07 21:17:07

This question already has an answer here:

这个问题已经有了答案:

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

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

5 个解决方案

#1


111  

With pure HTML you 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,你不能影响它——每一个现代浏览器(=用户)都能完全控制这种行为,因为它在过去被滥用了很多。

The anchor element has an attribute target*. The value you are looking for is _blank**.

锚元素有一个属性目标*。您正在寻找的值是_blank**。

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

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

它打开了一个新窗口(HTML4)或一个新的浏览上下文(HTML5)。然而,在现代浏览器中浏览上下文主要是“新标签”而不是“新窗口”。你对它没有影响,你不能“强迫”浏览器打开一个新窗口。

On the other hand, forcing a new window is possible via javascript - see Ievgen's answer below for a javascript solution. 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,强制一个新窗口是可能的——请参见下面的Ievgen的答案,以找到一个javascript解决方案。但是,请注意,通过javascript打开窗口(如果没有从锚元素的onclick事件中完成的话)会被弹出窗口拦截器阻塞!

(*) 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)

(*)这个属性可以追溯到浏览器没有标签的时代,而使用框架集是艺术的状态。与此同时,该属性的功能略有改变(参见MDN记录)

(**) There are some other values which do not make much sense anymore (because they were designed with framesets in mind) like _parent, _self or _top.

(**)还有一些其他的值已经不再有意义了(因为它们的设计是基于框架的),比如_parent、_self或_top。

#2


190  

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

这将打开一个新的窗口,而不是tab(使用JavaScript,但很简洁):

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

#3


24  

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

我知道它有点老,但如果你通过搜索找到一个解决方案,我得到了一个很好的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

它将在一个新窗口中打开所有的

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在其他问题上的回答),在new选项卡中打开链接。

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

#4


1  

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>

#5


0  

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。

#1


111  

With pure HTML you 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,你不能影响它——每一个现代浏览器(=用户)都能完全控制这种行为,因为它在过去被滥用了很多。

The anchor element has an attribute target*. The value you are looking for is _blank**.

锚元素有一个属性目标*。您正在寻找的值是_blank**。

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

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

它打开了一个新窗口(HTML4)或一个新的浏览上下文(HTML5)。然而,在现代浏览器中浏览上下文主要是“新标签”而不是“新窗口”。你对它没有影响,你不能“强迫”浏览器打开一个新窗口。

On the other hand, forcing a new window is possible via javascript - see Ievgen's answer below for a javascript solution. 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,强制一个新窗口是可能的——请参见下面的Ievgen的答案,以找到一个javascript解决方案。但是,请注意,通过javascript打开窗口(如果没有从锚元素的onclick事件中完成的话)会被弹出窗口拦截器阻塞!

(*) 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)

(*)这个属性可以追溯到浏览器没有标签的时代,而使用框架集是艺术的状态。与此同时,该属性的功能略有改变(参见MDN记录)

(**) There are some other values which do not make much sense anymore (because they were designed with framesets in mind) like _parent, _self or _top.

(**)还有一些其他的值已经不再有意义了(因为它们的设计是基于框架的),比如_parent、_self或_top。

#2


190  

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

这将打开一个新的窗口,而不是tab(使用JavaScript,但很简洁):

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

#3


24  

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

我知道它有点老,但如果你通过搜索找到一个解决方案,我得到了一个很好的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

它将在一个新窗口中打开所有的

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在其他问题上的回答),在new选项卡中打开链接。

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

#4


1  

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>

#5


0  

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。