如何导航到数据URL?

Question

我正在制作一个数据URL生成器，并且我正在制作链接到生成的数据URL。下面是一些链接到数据URL的示例代码。

<a href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxjaXJjbGUgY3g9IjI1MCIgY3k9IjI1MCIgcj0iMjEwIiBmaWxsPSIjZmZmIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iOCIvPgo8L3N2Zz4K">Click this link</a>

问题是，当你点击链接时，什么也没发生。

我尝试将location.href设置为数据URL。

<!--this doesn't work-->
<a href="#" onclick="event.preventDefault(); location.href='<data url here>'">Click this link</a>

window.open打开about:blank。

// Opens about:blank
document.querySelector('a').onclick = function(e) {
e.preventDefault();
window.open("data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxjaXJjbGUgY3g9IjI1MCIgY3k9IjI1MCIgcj0iMjEwIiBmaWxsPSIjZmZmIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iOCIvPgo8L3N2Zz4K");
}

也有一些例外。当你把链接拖到URL框或另一个/新的标签，它工作，但大多数人都懒得拖一个链接。但是如果页面是iframe，您可以点击链接。

<a href="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxjaXJjbGUgY3g9IjI1MCIgY3k9IjI1MCIgcj0iMjEwIiBmaWxsPSIjZmZmIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iOCIvPgo8L3N2Zz4K">
Because this snippet is shown in an iframe, you can click this link.
</a>

但是它没有在URL框中显示数据URL。我尝试使用location.pushState和location.replaceState，但您无法将URL框中的URL更改为页面到外部页面。基本上对于像这样的每个问题的堆栈溢出的每个答案以某种方式将数据url放在iframe中。它只是不起作用，因为url只是:空白。它就是不工作。

那么如何导航到数据URL呢?我没有尝试做什么来导航到数据URL?如果有任何帮助就太好了。

注意:我正在使用Microsoft Edge/Chromium 103

Answer 1

const data = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxjaXJjbGUgY3g9IjI1MCIgY3k9IjI1MCIgcj0iMjEwIiBmaWxsPSIjZmZmIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iOCIvPgo8L3N2Zz4K";
const _window = window.open();
_window.document.write('<iframe src="' + data + '" frameborder="0" style="border:0; top:0px; left:0px; bottom:0px; right:0px; width:100%; height:100%;" allowfullscreen></iframe>');

https://i.stack.imgur.com/GKRED.png