chrome浏览器报错Not allowed to navigate top frame to data URL怎么解决?

linkstar

89549226283

发布于
2017-09-01

ShirleyYD

3851542

更新于
2022-10-09

由于业务需要,a标签里面的href必须加base64图片编码,这样的结果是点击出现报错，但是右键在新标签页打开又可以打开。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <a href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAIUlEQVQ4jWMUXfH6PwOVABO1DBo1bNSwUcNGDRs1DAcAAJNsAs1wYr6uAAAAAElFTkSuQmCC" target="_blank">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAIUlEQVQ4jWMUXfH6PwOVABO1DBo1bNSwUcNGDRs1DAcAAJNsAs1wYr6uAAAAAElFTkSuQmCC" />
    </a>
</body>
</html>

还有就是,在express服务器环境下,a标签的href为空会自动跳转到localhost地址.
请问怎么解决这个问题呢？

chrome

阅读 26.4k

4 个回答

你是不是想点击图片在另一个窗口打开？不用href用js获取图片的src在新窗口打开试试

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<a onclick="window.open(document.getElementById('img').getAttribute('src'));">
    <img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABMAAAATCAYAAAByUDbMAAAAIUlEQVQ4jWMUXfH6PwOVABO1DBo1bNSwUcNGDRs1DAcAAJNsAs1wYr6uAAAAAElFTkSuQmCC"
         id="img"/>
</a>
<script>
</script>
</body>
</html>