一、为什么需要在新窗口中打开链接?
当我们在浏览网页的时候,可能会遇到需要打开一个新页面来浏览相关内容的情况:
- 为了防止用户离开当前页面,例如在填写表单时可以在新页面查看相关资料;
- 为了让用户可以同时浏览多个页面,例如在查看商品列表时可以在新页面同时查看商品详情;
- 为了方便用户分享内容,例如在社交媒体上分享某个网页时可以在新窗口中打开。
二、使用HTML属性实现在新窗口中打开链接
在HTML中,我们可以通过在链接中添加target="_blank"
属性来实现在新窗口打开链接:
<a href="https://www.w3schools.com" target="_blank">Visit W3Schools!</a>
使用这种方式打开的网页会在新窗口或新标签页中打开。
三、使用JS实现在新窗口中打开链接
如果我们想要在JS代码中控制链接的打开方式,可以使用window.open()
函数来实现。这个函数接受三个参数:
- URL:要打开的链接地址
- 窗口名称:新窗口的名称或目标(
_blank
表示在新窗口打开) - 特性:新窗口的特性,例如大小、位置、是否可调整大小等
下面是一个简单的示例:
function openLink() {
window.open("https://www.w3schools.com", "_blank");
}
当我们调用openLink()
函数时,就会在新窗口中打开https://www.w3schools.com
链接。
四、使用JS和HTML属性结合实现在新窗口中打开链接
有时候我们想要在JS代码中动态地控制链接的打开方式,但是又希望在HTML链接中设置默认的打开方式,这时我们可以结合使用target="_blank"
属性和window.open()
函数:
<a href="https://www.w3schools.com" target="_blank" onclick="openLink(event)">Visit W3Schools!</a>
function openLink(event) {
event.preventDefault(); // 阻止默认链接跳转行为
window.open(event.target.href, "_blank");
}
这样,当我们点击链接时,onclick
事件会调用openLink()
函数,在JS中使用window.open()
函数打开链接。
五、使用JS改变新窗口的大小和位置等特性
window.open()
函数的第三个参数可以设置新窗口的特性,例如大小、位置、是否可调整大小等。下面是一些常见的特性值:
height=
:窗口高度width=
:窗口宽度top=
:距离屏幕顶部的距离left=
:距离屏幕左侧的距离resizable=
:是否可调整大小scrollbars=
:是否显示滚动条
下面是一个使用JS改变新窗口大小和位置的例子:
function openLink() {
var features = "height=400,width=600,top=100,left=100,resizable=yes,scrollbars=no";
window.open("https://www.w3schools.com", "_blank", features);
}
六、完整代码示例
下面是一个完整的代码示例,实现了在新窗口中打开链接、阻止默认链接跳转、改变新窗口大小和位置等功能:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Open Link in New Window</title>
</head>
<body>
<a href="https://www.w3schools.com" target="_blank" onclick="openLink(event)">Visit W3Schools!</a>
<script>
function openLink(event) {
event.preventDefault();
var features = "height=400,width=600,top=100,left=100,resizable=yes,scrollbars=no";
window.open(event.target.href, "_blank", features);
}
</script>
</body>
</html>