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

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

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

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

尝试过的失败方案：

1. 将javascript:void(0)替换为javascript:;(替换为#的话会回到顶部)

2. onClick事件return false

3. 去除target属性

最终解决办法：动态切换href和target的值。

react hooks代码模拟解决方案如下：

const [flag, setFlag] = useState(false)

// url为跳转网页的地址

{setFlag(!flag)}} target={flag ? '_blank' : '_self'}>测试>

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

标签：target,chrome,void,javascript,新页面,href,跳转

来源： /weixin_43794073/article/details/113283283