I am making am making a data URL generator, and I am making the link to the generated data URL. Here is some sample code that links to a data URL.

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

The problem though, is that when you click the link, nothing happens.

I tried setting location.href to the data URL.

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

window.open opens about:blank.

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

There are a few exceptions though. When you drag the link to the URL box or to a different/new tab, it works, but then most people don't bother to drag a link. But if the page is in an iframe, you can click the link.

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

But then it doesn't show the data URL in the URL box. I tried using location.pushState and location.replaceState, but you can't change the URL in the URL box to a page to an external page. Basically every single answer on Stack Overflow to every single question like this puts the data url in an iframe in some sort of way. It just doesn't work because the url is just about:blank. It just doesn't work.

So how do I navigate to a data URL? What have I not tried to do to navigate to a data URL? Any help would be great.

Note: I am using Microsoft Edge/Chromium 103