js中怎么打开新窗口呢？不知道的小伙伴来看看小编今天的分享吧!
js中使用JavaScript window对象（属于BOM）打开新窗口。
1、语法：
window.open(URL,name,features);
该方法用于打开一个新的浏览器窗口或查找一个已命名的窗口。
2、参数说明：
URL ：一个可选的字符串，声明了要在新窗口中显示的文档的 URL。如果省略了这个参数，或者它的值是空字符串，那么新窗口就不会显示任何文档。
name ：一个可选的字符串，该字符串是一个由逗号分隔的特征列表，其中包括数字、字母和下划线，该字符声明了新窗口的名称。这个名称可以用作标记<a> 和 <form> 的属性 target 的值。如果该参数指定了一个已经存在的窗口，那么open()方法就不再创建一个新窗口，而只是返回对指定窗口的引用。在这种情况下，features 将被忽略。
features ：一个可选的字符串，声明了新窗口要显示的标准浏览器的特征。如果省略该参数，新窗口将具有所有标准特征。
3、常用窗口特征：
height、width：窗口文档显示区的高度、宽度。以像素计。
left、top：窗口的x坐标、y坐标。以像素计
toolbar=yes | no | 1 | 0：是否显示浏览器的工具栏。黙认是yes。
scrollbars=yes | no | 1| 0：是否显示滚动条。黙认是yes。
location=yes | no | 1 | 0：是否显示地址地段。黙认是yes。
status=yes | no | 1 | 0：是否添加状态栏。黙认是yes。
menubar=yes | no | 1 | 0：是否显示菜单栏。黙认是yes。
resizable=yes | no | 1 | 0：窗口是否可调节尺寸。黙认是yes。
titlebar=yes | no | 1 | 0：是否显示标题栏。黙认是yes。
fullscreen=yes | no | 1 | 0：是否使用全屏模式显示浏览器。黙认是no。
注意：不同的游览器对窗口特征属性支持也不相同。
4、使用案例：
打开新的窗口，窗口特性使用默认值
<body>
<script type="text/javascript">
function openAnother() {
window.open("http://www.baidu.com"); //打开新窗口，窗口特性全部使用默认值。
}
</script>
<button οnclick="openAnother()">打开新窗口</button>
</body>
打开新的窗口，设置窗口特性
<body>
<button οnclick="openAnother();">打开新窗口</button>
<script type="text/javascript">
var win;
function openAnother () {
win = window.open("http://www.baidu.com", "", "width=400, height=400,left = 200, right = 200, toolbar = no, menubar = no,location=no,resizable=no");//有些特性在个别浏览器上已被进制修改。
}
</script>
</body>
关闭新打开的窗口
open方法返回打开的那个窗口的window对象，可以调用close方法关闭新打开的窗口。
<body>
<button οnclick="openAnother();">打开新窗口</button>
<button οnclick="closeAnother();">关闭新打开的窗口</button>
<script type="text/javascript">
var win;
function openAnother () {
win = window.open("http://www.baidu.com", "", "width=400, height=400,left = 200, right = 200, toolbar = no, menubar = no,location=no,resizable=no");
}
function closeAnother() {
win.close();//关闭指定窗口
}
</script>
</body>
以上就是小编今天的分享了，希望可以帮助到大家。
JavaScript-打开新页面的方法？
window.open()
<button id="go">点击我</button><script> document.getElementById("go").addEventListener("click", () => { openUrl("https://so.toutiao.com/search?dvpf=pc&keyword=Plzbefat"); }); function openUrl(url) { window.open(url); }</script>
<a href="https://so.toutiao.com/search?dvpf=pc&keyword=Plzbefat" target="_blank" >点击我</a>
a 标签自带部分样式 , 点击过后会有颜色差
target参数详解:
一般使用a标签是不需要带上js逻辑的 , 这样使用起来简单明了 , 其余情况就使用 window.open() 就可以啦.
但是目前大多数使用 a 标签的时候 , 都觉得它原有的样式太丑 , 所以覆盖样式也是基本操作 .
css 对a标签的样式覆盖:
<style> /* 未点击过链接*/ a:link { color: red; } /* 已经点击过链接 */ a:visited { color: green; } /* 鼠标移动到a标签上方 */ a:hover { color: hotpink; } /* 按住不放链接的时候 */ a:active { color: blue; } /* a标签的下划线 */ a { text-decoration: none; }</style><a href="https://so.toutiao.com/search?dvpf=pc&keyword=Plzbefat" target="_blank" >头条@Plzbefat</a>
看看颜色和下划线
