在 Edge 中将 blob 作为 iframe 的 src 的解决方法

Question

我构建了一个类似 CodePen 的编辑器，仅在客户端。它的工作原理是让您编辑 HTML、JS 和 CSS，然后当您单击运行时，它会生成一个 blob 并为该 blob 设置一些 iframe src。

这适用于 Firefox(49)、Chrome(53)、Safari(10)，但不适用于 Edge

有解决办法吗？

我考虑过使用 dataURL，但根据 caniuse 的说法，Edge 也不支持它。

var html = `
<h1>hello world</h1>
<gscript src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.2.2/chroma.min.js"></gscript>
<gscript>
document.body.style.backgroundColor = chroma.hsv(Math.random() * 360 | 0, 0.4, 0.8).css();
</gscript>
`;
html = html.replace(/gscript/g, 'script');
var blob = new Blob([html], {type: 'text/html'});
var blobUrl = URL.createObjectURL(blob);
var iframe = document.querySelector("iframe");
iframe.src = blobUrl;

<iframe></iframe>

结果在 FF/Chrome/Safari

Edge 中的结果（控制台中也没有错误）

Answer 1

2023 现在 Edge 已更改为基于 Chromium，该问题仅限于任何使用已贬值的早期 Edge 的用户（MS 已声明 IE 和他们自己的早期 Edge 已结束生命周期），如当前 MSEdge.exe 中所示