- HTML并不简单:Web前端开发精进秘籍
- 张鑫旭
- 548字
- 2024-07-24 13:21:51
2.1.2 你知道target的这个特性吗
在线写作工具经常会有预览功能,点击“预览”按钮后,可以在新窗口查看预览效果,例如知名的开源博客系统WordPress,对应的操作界面截图如图2-4所示。
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_26_2.jpg?sign=1739500420-yp3KQO1soc0UcipF00bzaK8l8Swqebq0-0-061b8e4856d42c6a4dcea5297456f702)
图2-4 WordPress预览按钮的截图示意
请问,你会如何实现这个预览效果?
很多人会通过以下方式实现:
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_27_1.jpg?sign=1739500420-F6J6Lu8bwpjhBf0ca6poL30fYjJqkQEZ-0-a3540a7529cd89be254a708b30ffa052)
这看似实现了新窗口打开的功能,但是有个问题,每次点击都会打开一个新窗口,而预览是会频繁操作的行为,那岂不是会打开多个网址重复的新窗口?
这显然会影响用户体验,试想一下,点击了5次“预览”按钮,结果浏览器出现了5个类似的预览页面,还能分清楚哪个预览页面是最新的吗?
所以,最好的效果应该是最多只打开一个新窗口,第二次点击“预览”按钮的时候,自动刷新这个新窗口。
那么,这种效果可以实现吗?可以,还是使用target属性即可。
在<a>元素中,只要target属性设为某个任意的固定值,则每次新窗口打开的时候,都只会在这个窗口创建,例如:
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_27_2.jpg?sign=1739500420-LOXU7tMxz1fHLwgh21fnLrbfNsooaUP2-0-7b452ecb460c7ebf1e0e867557401e07)
此时,预览只会在唯一的窗口中不断刷新,不会出现打开多个窗口的情况。
眼见为实,本书提供了演示页面给大家实际体验,在浏览器中输入地址https://www.htmlapi.cn/2/1-4.html或扫码访问即可。
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_27_3.jpg?sign=1739500420-YDOfMoQCmtblpB59B49edxXrBRHvXt9G-0-89d377d4405d5158897df5fe518bd928)
可以看到,每次点击页面中的“预览”按钮(参见图2-5),都只会不断刷新之前已经打开的预览页面,而不会像target="_blank"那样每次都打开一个新窗口。
![](https://epubservercos.yuewen.com/BADDE0/30121580904729906/epubprivate/OEBPS/Images/48048_27_4.jpg?sign=1739500420-8CY4lNpkfDXGJUw8qlYPURoIypwnObTT-0-1990f97b345888a156a97daa431a0afe)
图2-5 页面“预览”按钮点击示意
其他支持target属性的元素也有类似的特性,例如本书后面介绍的<form>元素。