您现在的位置是:焦点 >>正文

a标签打开新窗口

焦点451人已围观

简介点击一个链接,浏览器当前页面直接被替换掉——这是大多数人对网页导航的默认预期。但如果你在HTML里给``标签加上一个属性,事情就完全不一样了:新页面会在另一个标签页里弹出来,原来的页面纹丝不动。这个属 ...

点击一个链接,签打浏览器当前页面直接被替换掉——这是开新大多数人对网页导航的默认预期。但如果你在HTML里给``标签加上一个属性,窗口事情就完全不一样了:新页面会在另一个标签页里弹出来,签打原来的开新页面纹丝不动。这个属性就是窗口`target="_blank"`。

```html 打开新窗口 ```

代码就这么短。签打浏览器解析到`target="_blank"`时,开新会分配一个新的窗口浏览上下文来加载目标URL,而不是签打复用当前标签页。早期的开新做法是`target="_new"`,但那个写法有个坑——它只是窗口给新窗口起了个名字叫“_new”,第二次点击同一个链接时,签打浏览器发现已经有一个叫“_new”的开新窗口了,就直接在那个窗口里加载,窗口不再开新的。`_blank`是保留关键字,每次都会强制创建新的上下文,行为更符合直觉。

我印象很深的一件事:几年前帮一个朋友看他的个人博客,他说每次点文章里的外链,读者就流失了,因为当前页被替换掉,读者看完外链很难再回来。我让他把所有外部链接加上`target="_blank"`,跳出率数据两周后降了一截。这个属性的实际价值不在于“炫技”,而在于它改变了用户的浏览路径——原页面保持存活,用户随时可以切回来。

但`_blank`有个安全隐患,很多人不知道。新打开的页面里,`window.opener`默认指向原页面的window对象。也就是说,新页面可以通过`window.opener.location = "钓鱼网址"`把原标签页导航到一个伪造的登录页。用户切回去一看,地址栏还是原来的域名结构,很容易上当。修复方式很简单,加上`rel="noopener"`:

```html 安全地打开新窗口 ```

现代浏览器其实已经默认对`target="_blank"`施加了`noopener`行为,Chrome从88版本开始就这么做了。但显式写上`rel="noopener"`仍然是好习惯——你无法控制用户用什么浏览器。顺带一提,`rel="noreferrer"`也能达到类似效果,而且额外阻止了Referer头部的发送。如果你不希望目标网站知道流量从哪来,用这个。

什么时候不该用`_blank`?站内导航。用户在你自己的网站里从首页点到文章页,再点到分类页,每次都弹新标签页,标签栏很快堆成一排,体验极差。这不是技术问题,是产品判断。外链、PDF文件、需要保持当前操作状态的场景(比如填写了一半的表单旁边打开帮助文档),这些适合新窗口。普通的站内跳转,老老实实用默认行为。

还有个细节:用JavaScript的`window.open()`也能打开新窗口,但它容易被浏览器拦截,尤其是非用户直接触发的情况下。``标签的`target="_blank"`是原生行为,不经过弹窗拦截器,可靠性高得多。能用HTML属性解决的问题,别绕道去写JS。

移动端的情况又不太一样。iOS的Safari和Android的Chrome对`target="_blank"`的处理是打开新标签页,但用户在手机上的标签页管理习惯跟桌面完全不同——很多人根本不知道自己的浏览器开了多少个标签。所以移动端外链是否用`_blank`,值得重新考虑。有些团队的做法是:桌面端用`_blank`,移动端用默认导航。通过CSS媒体查询配合JS判断,或者干脆在服务端根据User-Agent输出不同的HTML。

说到底,`target="_blank"`是一个只有几个字符的属性,但它牵扯到用户体验、安全性、浏览器兼容性和产品策略。写代码的时候多想一步,用户就少一次困惑。

Tags:

相关文章

  • pua视频教程网盘下载

    焦点

    百度网盘里那个名为“恋爱话术大全”的文件夹,是我一个朋友去年分享给我的。他当时神秘兮兮地说,这里面有货。我点开一看,五百多个G,分门别类,从“开场白三十条”到“挽回前任终极话术”,甚至还有“打压式幽默 ...

    【焦点】

    阅读更多
  • b2b权重高的网站

    焦点

    做外贸的没人不知道Alibaba,但真正把B2B平台权重这件事掰开揉碎讲清楚的,没几个。我先抛一个判断:所谓“权重高”,本质上是搜索引擎和采购商双重信任的叠加。Google给一个B2B站点的权重,看的 ...

    【焦点】

    阅读更多
  • 测试工程师的岗位职责

    焦点

    测试工程师的工作,很多人以为就是点点按钮、找找bug。我入行第一年也这么想,直到有次线上事故复盘,一个支付流程的边界条件没覆盖到,导致用户重复扣款。那次之后我才明白,测试的核心不是“找茬”,而是用系统 ...

    【焦点】

    阅读更多


友情链接