![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=1738859104-CDOjJ7mh6bYFOZ9Qym72inxeqJ5qkh0K-0-3be70c14d5a0246b0f5454e6aeb448dc)
图2-4 WordPress预览按钮的截图示意
请问,你会如何实现这个预览效果?
很多人会通过以下方式实现:
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_27_1.jpg?sign=1738859104-nYawPyV2GBI72OVe31fqVRJhW8oQksca-0-ad2a88fc8a192ca5abd84842e7ed82cc)
这看似实现了新窗口打开的功能,但是有个问题,每次点击都会打开一个新窗口,而预览是会频繁操作的行为,那岂不是会打开多个网址重复的新窗口?
这显然会影响用户体验,试想一下,点击了5次“预览”按钮,结果浏览器出现了5个类似的预览页面,还能分清楚哪个预览页面是最新的吗?
所以,最好的效果应该是最多只打开一个新窗口,第二次点击“预览”按钮的时候,自动刷新这个新窗口。
那么,这种效果可以实现吗?可以,还是使用target属性即可。
在<a>元素中,只要target属性设为某个任意的固定值,则每次新窗口打开的时候,都只会在这个窗口创建,例如:
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_27_2.jpg?sign=1738859104-vXTJ8SEl3iUgxnnIbjLUL90fE1oZPYIJ-0-fead2cbd3929ff9cfa1b308b7790205d)
此时,预览只会在唯一的窗口中不断刷新,不会出现打开多个窗口的情况。
眼见为实,本书提供了演示页面给大家实际体验,在浏览器中输入地址https://www.htmlapi.cn/2/1-4.html或扫码访问即可。
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_27_3.jpg?sign=1738859104-xxll3YMNcJWxYmd5eR5IzhE3LUkHKLp7-0-2e6e4d9f6db09722589d96a0473fde4e)
可以看到,每次点击页面中的“预览”按钮(参见图2-5),都只会不断刷新之前已经打开的预览页面,而不会像target="_blank"那样每次都打开一个新窗口。
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_27_4.jpg?sign=1738859104-ItL6iXCKS4ElyNzv0Bg5wu2TX4Sw5u14-0-341b2b090b9a0b9bc6322c0560a0b5cf)
图2-5 页面“预览”按钮点击示意
其他支持target属性的元素也有类似的特性,例如本书后面介绍的<form>元素。