a标签href设置javascript:void(0),在chrome点击打开新的空白页

本文介绍了一种在特定条件下,解决_a_标签点击后在新窗口打开导致的问题的方法,并提供了一个使用React Hooks实现的示例。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

需求是:点击链接,根据权限或后台数据来动态判断是否可跳转到新页面

开发测试时,在两台性能较差的电脑上,及时设置了javascript:void(0),chrome仍会打开新的空白页。

排查结果是a标签上设置了target=’_blank’,与javascript:void(0)一起使用,可能出现的现象,至于为什么只有这两台电脑出问题,暂不知原因。

尝试过的失败方法:
1. 将javascript:void(0)替换为javascript:;(替换为#的话会回到顶部)
2. onClick事件return false
3. 去除target属性,或将target值设为空

最终解决方法:动态切换href和target的值。

react hooks代码模拟解决方法如下:

const [flag, setFlag] = useState(false)
// url为跳转网页的地址
<a href={flag ? url : 'javascript:void(0)'} onClick={() => {setFlag(true)}} target={flag ? '_blank' : '_self'}>测试</>

注意:因为通过点击链接来动态判断是否可跳转,第一次点击会设置href的值,即使有了url,也不会跳转新页面,此时需要在onClick事件中手动调用window.open(url, ‘_blank’)进行跳转。此时,会存在一个新的问题,大部分浏览器会阻止js调用的打开新页面。需要用户手动允许跳转。o(╯□╰)o暂时找不到更好的办法,只能劳驾用户大大,允许一次就行了。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

梅花三

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值