
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
2.1.2 你知道target的这个特性吗
在线写作工具经常会有预览功能,点击“预览”按钮后,可以在新窗口查看预览效果,例如知名的开源博客系统WordPress,对应的操作界面截图如图2-4所示。

图2-4 WordPress预览按钮的截图示意
请问,你会如何实现这个预览效果?
很多人会通过以下方式实现:

这看似实现了新窗口打开的功能,但是有个问题,每次点击都会打开一个新窗口,而预览是会频繁操作的行为,那岂不是会打开多个网址重复的新窗口?
这显然会影响用户体验,试想一下,点击了5次“预览”按钮,结果浏览器出现了5个类似的预览页面,还能分清楚哪个预览页面是最新的吗?
所以,最好的效果应该是最多只打开一个新窗口,第二次点击“预览”按钮的时候,自动刷新这个新窗口。
那么,这种效果可以实现吗?可以,还是使用target属性即可。
在<a>元素中,只要target属性设为某个任意的固定值,则每次新窗口打开的时候,都只会在这个窗口创建,例如:

此时,预览只会在唯一的窗口中不断刷新,不会出现打开多个窗口的情况。
眼见为实,本书提供了演示页面给大家实际体验,在浏览器中输入地址https://www.htmlapi.cn/2/1-4.html或扫码访问即可。

可以看到,每次点击页面中的“预览”按钮(参见图2-5),都只会不断刷新之前已经打开的预览页面,而不会像target="_blank"那样每次都打开一个新窗口。

图2-5 页面“预览”按钮点击示意
其他支持target属性的元素也有类似的特性,例如本书后面介绍的<form>元素。