![HTML并不简单:Web前端开发精进秘籍](https://wfqqreader-1252317822.image.myqcloud.com/cover/685/51089685/b_51089685.jpg)
上QQ阅读APP看本书,新人免费读10天
设备和账号都新为新人
2.1.2 你知道target的这个特性吗
在线写作工具经常会有预览功能,点击“预览”按钮后,可以在新窗口查看预览效果,例如知名的开源博客系统WordPress,对应的操作界面截图如图2-4所示。
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_26_2.jpg?sign=1739027475-KSeUUqV3DDgmvu8sH31zdqWe3HB6IreL-0-f897285c7e73ba8c358824aa516c1c1b)
图2-4 WordPress预览按钮的截图示意
请问,你会如何实现这个预览效果?
很多人会通过以下方式实现:
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_27_1.jpg?sign=1739027475-gMd6bxT5ayVZMLAyZnXEz3oSPGRD7pv3-0-5ababa62d9eff530ed7bf8a6e79f081f)
这看似实现了新窗口打开的功能,但是有个问题,每次点击都会打开一个新窗口,而预览是会频繁操作的行为,那岂不是会打开多个网址重复的新窗口?
这显然会影响用户体验,试想一下,点击了5次“预览”按钮,结果浏览器出现了5个类似的预览页面,还能分清楚哪个预览页面是最新的吗?
所以,最好的效果应该是最多只打开一个新窗口,第二次点击“预览”按钮的时候,自动刷新这个新窗口。
那么,这种效果可以实现吗?可以,还是使用target属性即可。
在<a>元素中,只要target属性设为某个任意的固定值,则每次新窗口打开的时候,都只会在这个窗口创建,例如:
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_27_2.jpg?sign=1739027475-Eojb4td4FLZthExSTpb33ZzWVwZX6KDx-0-59ca04d0474b7f52def2f4afd8536eb8)
此时,预览只会在唯一的窗口中不断刷新,不会出现打开多个窗口的情况。
眼见为实,本书提供了演示页面给大家实际体验,在浏览器中输入地址https://www.htmlapi.cn/2/1-4.html或扫码访问即可。
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_27_3.jpg?sign=1739027475-XiwABlh2qtN36dJP86wg2UDQlbOnkefd-0-d84a3b8f75e667cc3e56ab0c37ac47b0)
可以看到,每次点击页面中的“预览”按钮(参见图2-5),都只会不断刷新之前已经打开的预览页面,而不会像target="_blank"那样每次都打开一个新窗口。
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_27_4.jpg?sign=1739027475-fTFwvZGNOBFjK8MIyNUv2qUPX6dRaR6R-0-a5b79df9fd93659d5a992b0ad8200487)
图2-5 页面“预览”按钮点击示意
其他支持target属性的元素也有类似的特性,例如本书后面介绍的<form>元素。