javascript 如何在 Html/css 的新窗口（不在新标签页）中打开链接

How to open a link in new window(not in new tab) in Html/css

提问by srinath516

To open link in new tab you do this:

要在新选项卡中打开链接，请执行以下操作：

<a href="#" target="_blank">open in new tab</a>

But how can I made it open in a new window?

但是我怎样才能让它在新窗口中打开呢？

So, help me out to overcome this problem.

所以，帮我解决这个问题。

回答by R R

i think yo want to open a completely new window on clicking a link.in other words u want a popup.try the following code.

我想你想在点击链接时打开一个全新的窗口。换句话说，你想要一个弹出窗口。试试下面的代码。

<script language="javascript" type="text/javascript">
function popitup(url) {
newwindow=window.open(url,'name','height=200,width=150');
if (window.focus) {newwindow.focus()}
return false;
   }

<a href="popupex.html" onclick="return popitup('popupex.html')">Link to popup</a>

回答by BordiArt

try this:

试试这个：

<a href="#nul" onclick="window.open('newLink.html ','','Toolbar=1,Location=0,Directories=0,Status=0,Menubar=0,Scrollbars=0,Resizable=0,Width=550,Height=400');">Name</A>

回答by srinath

Use below code myWindow=window.open('https://www.google.co.in/','','width=500,height=500');

使用下面的代码 myWindow=window.open(' https://www.google.co.in/','','width=500,height=500');

回答by Alex Autrey

This works in theory but it will depend on the preferences set in the browser. Now a days you can fake a new window by using div's and Layers. Is there anyway to implement a layer that hides what is behind it.

这在理论上有效，但它取决于浏览器中设置的首选项。现在，您可以使用 div 和图层来伪造一个新窗口。无论如何要实现一个隐藏其背后内容的层。

JavaScript:

JavaScript：

function getElementsByClass( searchClass, domNode, tagName) { 
    if (domNode == null) domNode = document;
    if (tagName == null) tagName = '*';
    var el = new Array();
    var tags = domNode.getElementsByTagName(tagName);
    var tcl = " "+searchClass+" ";
    for(i=0,j=0; i<tags.length; i++) { 
    var test = " " + tags[i].className + " ";
    if (test.indexOf(tcl) != -1) 
        el[j++] = tags[i];
} 
return el;
}
// paste getElementsByClass function (see above) here 

function showtab(tabname) 
{ 
// hide every element with class 'box1'  
var tabs = getElementsByClass('box1');
for(i=0; i<tabs.length; i++) {
    tabs[i].style.display = 'none';
    //tabs[i].style.visibility = 'hidden';
}
// hide every element with class 'box1'      
var tabs2 = getElementsByClass('myStyle');
for(i=0; i<tabs2.length; i++) {
    tabs2[i].style.display = 'none';
    //tabs2[i].style.visibility = 'hidden';
}

document.getElementById(tabname).style.display='block';
//document.getElementById(tabname).style.visibility='visible';
// show element with given tabname 
} 

function showsubtab(tabname)
{
//hide every element with class 'myStyle'
var tabs = getElementsByClass('myStyle');
for(i=0; i<tabs.length; i++) {
    tabs[i].style.display = 'none';
    //tabs[i].style.visibility = 'hidden';
}
document.getElementById(tabname).style.display='block';
//document.getElementById(tabname).style.visibility='visible';
}

if (window.addEventListener) { // Mozilla, Netscape, Firefox
window.addEventListener('load', showmessage, false);
} else if (window.attachEvent) { // IE
window.attachEvent('onload', showmessage);
}

function showmessage() {
document.getElementById('box').style.display='block';
document.getElementById('div1').style.backgroundColor='grey';
document.getElementById('div1').style.opacity = 0.2;
document.documentElement.style.overflow = "hidden"; //firefox, chrome
document.body.scroll = "no"; // ie only
var bodyLayer = document.getElementById('div1');
DisableLinks(bodyLayer);
}
function hidemessage() {
document.getElementById('box').style.display='none';
document.getElementById('div1').style.backgroundColor='transparent';
document.getElementById('div1').style.opacity = 1.0;
document.documentElement.style.overflow = 'auto';  // firefox, chrome
    document.body.scroll = "yes"; // ie only
var bodyLayer = document.getElementById('div1');
EnableLinks(bodyLayer);
}

function DisableLinks(dom) {
if(undefined != dom){
    links=dom.getElementsByTagName('A');
} else {
    links=document.getElementsByTagName('A');
}

for(var i=0; i<links.length; i++) {
    links[i].style.pointerEvents="none";
}
}

function EnableLinks(dom) {
if(undefined != dom){
    links=dom.getElementsByTagName('A');
} else {
    links=document.getElementsByTagName('A');
}

for(var i=0; i<links.length; i++) {
    links[i].style.pointerEvents="auto";
}
}

HTML

HTML

<div id="box">
<section id="close">
<section id="title">Important Site Message</section>
<section id="button"><a href="#" onClick="hidemessage();">[X]</a>&nbsp;</section>
</section>
<!--Body of the Message-->
</div>

CSS #box {position: absolute; top: 50%; left: 50%; height: 15.625em; width: 25em; background-color:#FFF; margin-top: -7.8125em; margin-left: -12.5em; display: none; overflow: auto; border-color:#000; border-style:ridge; border-width:medium; z-index: 3; color: #000;} #close {border-bottom: inset thick #CCC; background-color: #000; width: inherit; height: 1.2em; color: #FFF; position: fixed;} #close a:visited {color: #FFF;} #close a:hover {color: red; text-decoration:none;} #close #title {text-align: center; font-weight:bold; width: 90%; padding: 1 1 1 1; clear: left; float: left; background-color:#000; color:#FFF;} #close #button {text-align: right; padding: 1 1 1 1; width: 10%; clear: right; float: right; background-color: #000; color: #FFF;}

CSS #box {位置：绝对；顶部：50%；左：50%；高度：15.625em；宽度：25em；背景色：#FFF；边距顶部：-7.8125em；左边距：-12.5em；显示：无；溢出：自动；边框颜色：#000；边框样式：脊；边框宽度：中等；z-索引：3；颜色：#000；} #close {border-bottom：插入粗#CCC；背景色：#000；宽度：继承；高度：1.2em；颜色：#FFF；位置：固定；} #close a:visited {color: #FFF;} #close a:hover {color: red; 文字装饰：无；} #close #title {文字对齐：居中；字体粗细：粗体；宽度：90%；填充：1 1 1 1；清除：左；向左飘浮; 背景色：#000；颜色：#FFF;} #close #button {text-align: right; 填充：1 1 1 1；宽度：10%；清楚：对；浮动：对；背景色：#000；颜色：#FFF;}

回答by Vinay Pratap Singh

If you specify the width and height when you call window.open, most browsers will open the link in a new window rather than a tab.

如果在调用时指定宽度和高度window.open，大多数浏览器将在新窗口而不是选项卡中打开链接。

window.open(url, '_blank', 'width=500,height=400');

Live Demo

现场演示

回答by N20084753

<script>
function openWin()
{
myWindow=window.open('','','width=200,height=100');
myWindow.document.write("<p>This is 'myWindow'</p>");
myWindow.focus();
}
</script>

Refer more over here

在这里参考更多

回答by MJK

usetarget="_blank"inside the "a" tag

使用target="_blank"“一”标签内