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

最新推荐文章于 2024-09-22 23:59:32 发布

键盘上的草根舞者

最新推荐文章于 2024-09-22 23:59:32 发布

阅读量7.9k

点赞数 2

分类专栏：前端开发基础文章标签：前端开发 html 超链接新窗口打开 a标签

本文链接：https://blog.csdn.net/xjun0812/article/details/50524921

版权

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

9 篇文章 0 订阅

订阅专栏

<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 标签就可以实现每次都在新窗体中打开。

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