Edge中window.open打开data URL报顶层框架导航禁止错误解决

这个错误是Chromium内核浏览器（你使用的Edge 103属于该内核范畴）从v60版本开始落地的安全限制：为防范恶意站点通过data URL构造钓鱼页面、注入恶意脚本，浏览器默认禁止顶层窗口（包括新打开的标签页）直接导航到data类型URL。你原先直接调用window.open(dataurl)的写法会被安全策略直接拦截，最终只打开空白的about:blank页面。
你之前尝试嵌入iframe不生效，是因为没有正确向新打开的空白页写入内容，不是方案方向错误。

方案1：空白页写入内容（通用兼容所有data URL类型） #

不要直接把data URL作为window.open的目标地址，先打开空白标签页，再主动向空白页的文档流中写入要展示的内容即可，适配所有类型的data URL：

let dataurl = "data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiIHN0YW5kYWxvbmU9Im5vIj8+CjxzdmcgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB3aWR0aD0iNTAwIiBoZWlnaHQ9IjUwMCI+CjxjaXJjbGUgY3g9IjI1MCIgY3k9IjI1MCIgcj0iMjEwIiBmaWxsPSIjZmZmIiBzdHJva2U9IiMwMDAiIHN0cm9rZS13aWR0aD0iOCIvPgo8L3N2Zz4K";

document.querySelector("#newtab").addEventListener("click", function () {
  const newTab = window.open();
  if (!newTab) {
    alert("请允许本站的弹出窗口权限后重试");
    return;
  }
  // 媒体/文件类data URL（图片、svg、pdf等）用iframe铺满整页加载
  newTab.document.write(`
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>内容预览</title>
  <style>
    * {margin: 0; padding: 0; height: 100%; width: 100%;}
    iframe {border: none;}
  </style>
</head>
<body>
  <iframe src="${dataurl}"></iframe>
</body>
</html>
  `);
  newTab.document.close();

  // 如果是text/html类型的data URL，不需要套iframe，直接解析内容写入即可：
  // const htmlContent = decodeURIComponent(dataurl.split(',')[1]);
  // newTab.document.write(htmlContent);
  // newTab.document.close();
});

方案2：转Blob URL打开（适配媒体/二进制类data URL） #

如果你的data URL是图片、视频、音频这类二进制媒体资源，可以先把data URL转换成Blob对象，生成同源的Blob URL再打开，这种方式同样不会触发安全拦截，代码更简洁：

// data URL转Blob工具函数
function data2Blob(dataUrl) {
  const [meta, content] = dataUrl.split(',');
  const mime = meta.match(/:(.*?);/)[1];
  const binStr = atob(content);
  const u8Arr = new Uint8Array(binStr.length);
  for (let i = 0; i < binStr.length; i++) {
    u8Arr[i] = binStr.charCodeAt(i);
  }
  return new Blob([u8Arr], {type: mime});
}

document.querySelector("#newtab").addEventListener("click", function () {
  const blob = data2Blob(dataurl);
  const blobUrl = URL.createObjectURL(blob);
  window.open(blobUrl);
});

• 以上两种方案都需要在用户主动触发的事件回调（比如你现在用的click事件）中执行，符合浏览器的用户交互策略要求，不会被弹窗拦截器误拦，除非用户手动禁用了本站点的弹窗权限。
• 不要尝试直接给a标签加target="_blank"、href填data URL的方式实现，这种顶层导航的写法同样会被安全策略拦截。
• Blob URL属于站点同源的临时URL，会在当前页面关闭后自动回收，不需要手动调用URL.revokeObjectURL释放，不会造成内存泄漏。

内容的提问来源于stack exchange，提问作者c136