HTML中<a>
元素是用来创建超链接的,即指向其他页面或者同一页面的不同区域,其中的href属性会指定链接的目标URL。a元素有三种常用的属性target,用来控制打开方式:
_self:在当前窗口或者框架中打开链接(默认)
_blank:在新窗口中打开链接
_parent:在父级框架中打开链接
如果我们需要实现在点击链接后自动刷新当前页面或者在新窗口打开链接,可以使用JavaScript来动态修改<a>
元素的属性。
1. 自动刷新页面
让链接点击后自动刷新页面,可以将<a>
元素的target属性设置为"_self",并在onclick事件中添加location.reload()来实现:
<a href="_javascript:void(0)" target="_self" onclick=location.reload()">点我刷新页面</a>
上面的代码中,_javascript:void(0)会阻止链接默认的跳转行为,target="_self"表示在当前窗口中打开,onclick事件触发时会调用location.reload()来刷新页面。
2. 在新窗口打开链接
让链接在新窗口中打开,可以将<a>
元素的target属性设置为"_blank":
<a href="https://www.baidu.com" target="_blank">在新窗口中打开百度</a>
如果链接地址不可用或者打开速度较慢,可能会导致用户体验不佳。这时我们可以使用JavaScript在新窗口打开链接,并添加自定义的操作和样式。
<a href="_javascript:void(0)" onclick=window.open('https://www.baidu.com', '_blank', 'width=800,height=600')">在新窗口中打开百度</a>
上面的代码中,window.open()方法会在新窗口中打开链接,第二个参数"_blank"表示在新窗口中打开,第三个参数为可选参数,可以设置新窗口的宽度、高度等属性。
3. 实现链接点击后自动刷新并在新窗口中打开
如果我们需要同时实现自动刷新和在新窗口中打开链接,可以结合上述两种方法,使用JavaScript修改<a>
元素的target属性和onclick事件来实现:
<a href="https://www.baidu.com" target="_self" onclick=location.reload(); window.open('https://www.baidu.com', '_blank', 'width=800,height=600')">点我在新窗口中打开并刷新</a>
上面的代码中,链接会在当前窗口中打开(target="_self"),同时点击后会调用location.reload()刷新页面,然后调用window.open()在新窗口中打开链接。