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

Question

我已经构建了一个类似CodePen的编辑器，它只是客户端。它的工作原理是让你编辑HTML，JS和CSS，然后当你点击run时，它会生成一个blob并将一些iframe src设置为该blob。

这适用于Firefox（49），Chrome（53），Safari（10），但它在Edge中不起作用

有解决方法吗？

我考虑使用dataURL，但根据caniuse在Edge中不支持。

＆＃13;

＆＃13;

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;

＆＃13;

<iframe></iframe>

＆＃13;

＆＃13;

＆＃13;

导致FF / Chrome / Safari

导致Edge（控制台中也没有错误）