说说a标签的target

对我来说,a标签的target属性,是众多功能单一,一看很熟很常用,其实不是很了解的html属性之一。

大部分时候的a都不需要带target,用到的场景无非是要在新标签页/窗口中打开的链接,加一个target="_blank"的属性。

<a href="..." target="_blank">...</a>

我觉得,其实了解到这,平时基本上够用了。我也确实好长时间,只是知道这么多。

但是一直让我很奇怪的一件事是,为什么这里target的取值是_blank而不是blank呢。html标签的属性并没有统一前面加下划线的习惯,其他的常用的属性,基本都不会这样,比如type="input",method="post",这里也用target="blank"不好么。那我就尝试了下target="blank",嗯?好像可以的,也是在新标签页中打开了!然后我就更奇怪了,为什么明明这样可以,你们所有人都要用_blank,手贱?

所以就去看html标准,看看标准到底是怎么说的。

Syntax

<a target="_blank|_self|_parent|_top|framename">

Attribute Values

ValueDescription
_blankOpens the linked document in a new window or tab
_selfOpens the linked document in the same frame as it was clicked (this is default)
_parentOpens the linked document in the parent frame
_topOpens the linked document in the full body of the window
framenameOpens the linked document in a named frame

看到这就挺明白了,关键字就4个,_blank|_self|_parent|_top,各自含义说得也很清楚。至于为什么关键字都是带下划线的,我觉得是出于避免跟framename冲突的考虑,毕竟self、parent、top什么的都是很常用的变量名,加个下划线会很有效。如果写blank,那就是走的framename的逻辑。剩下的疑问就是,

  1. 这里frame的name是个什么概念

  2. 为什么我想在name为“blank”的页面中打开,它就给我在新页面中打开,这跟直接在新页面中打开又有什么区别

然后一个个来。

  1. 到目前为止,我所总结的frame的name的存在意义主要是用于标识frame,尤其存在好几个你套我,我嵌你的时候,至于怎么起作用:
  • 对应的frame中的js运行环境中,可以通过window.name读取
  • 类似本例中target属性,可以通过指定name值选择frame执行操作,如form的target属性
  1. 这个就很好回答了,在没有名为blank的frame可以作为链接页面的容器时,新开一个页面,并将name设置为blank。这时候的新页面中,在console里可以打印出window.name的值为blank,而target指向blank的链接将在本页面中打开。

那么以上知识的使用场景是什么呢,就是说我知道这些,又有什么用呢?

好像还是有的。以编辑器的预览(也许是markdown?)为例吧,要跳转到一个预览结果页面,不考虑复杂的js实现,这个跳转得在新页面中,因为编辑器本身状态得保留着;但预览这个行为还比较频繁,不能预览一次就打开一个新的标签页吧,每次预览完还得手动关掉。所以如果每次都跳转到同一个name(比如preview,就写个链接<a target="preview" href="/preview">预览</a>)指定的页面中,那么每次预览的结果页都只是在这个页面中打开,不至于开出一大堆来。

目前就想到这些。