设置超链接在新的窗口中打开，而不是在本窗口中打开

最新推荐文章于 2025-04-24 19:14:21 发布

原创最新推荐文章于 2025-04-24 19:14:21 发布 · 8.6k 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#前端开发 #html #超链接 #新窗口打开 #a标签

前端开发基础专栏收录该内容

9 篇文章

订阅专栏

本文详细介绍了HTML链接的target属性如何控制链接文档的加载位置，包括新窗口、当前窗口、父窗口和顶级窗口等选项。同时，针对使用target=_blank时页面频繁刷新的问题，提供了两个解决方案：通过在head标签中加入<basetarget=_blank></basetarget>来确保每次点击都打开新窗口，或者通过创建JS脚本来动态修改所有外部链接的目标属性。

<a> 标签的 target 属性规定在何处打开链接文档。

如果在一个 <a> 标签内包含一个 target 属性，浏览器将会载入和显示用这个标签的 href 属性命名的、名称与这个目标吻合的框架或者窗口中的文档。如果这个指定名称或 id 的框架或者窗口不存在，浏览器将打开一个新的窗口，给这个窗口一个指定的标记，然后将新的文档载入那个窗口。从此以后，超链接文档就可以指向这个新的窗口。

设置超链接在新的窗口中打开的方法如下：

<a href="http://blog.csdn.net/xjun0812?viewmode=list" target="_blank">文章列表（新窗口打开）</a>

点击测试（新窗口打开）

点击测试（本窗口打开）

其他设置：

_self：默认。在相同的框架中打开被链接文档

_parent：在父框架集中打开被链接文档。

_top：在整个窗口中打开被链接文档

当然也可以是自己定义的一个frame 的名字，比如

扩展

问题在 a 标签中已加入 target="_blank"，而网页打开只在一个新窗口中打开，始终都在改新窗口中刷新内容，用户如果失去该窗口的焦点，在原窗口中点击 a 标签用户看不到新打开的窗体，实际已在失去焦点的窗体中刷新了内容，会给用户造成错觉，这就是为什么现在大家浏览有些网站会发现这个问题。

解决方案一

1、在 head 标签加入<basetarget="_blank" />

这样就能每次点击打开新窗口。

解决方案二、

2、新建一个JS脚本文件external.js，并在里面输入如下代码：

function externallinks() {
    if (!document.getElementsByTagName) return;
    var anchors = document.getElementsByTagName("a");
    for (var i = 0; i < anchors.length; i++) {
        var anchor = anchors[i];
        if (anchor.getAttribute("href") &&
            anchor.getAttribute("rel") == "external")
            anchor.target = "_blank";
    }
}
window.onload = externallinks;

html中写成：

<a href="http://www.baidu.com" rel="external">

在点击a 标签就可以实现每次都在新窗体中打开。

最后，时间仓促，资质有限，文中表述仅代表个人观点，部分内容参考自网络，不准确的地方还望见谅，欢迎严厉地指正。