Workaround for blob as src to iframe in Edge

三世轮回 提交于 2019-12-09 22:39:50

问题


I've built a CodePen-like editor that's client side only. It works by letting you edit HTML, JS, and CSS, and then when you click run, it generates a blob and sets some iframe src to that blob.

This works in Firefox(49), Chrome(53), Safari(10) but it doesn't work in Edge

Is there a workaround?

I thought about using a dataURL but according to caniuse that's not supported in Edge either.

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>

result in FF/Chrome/Safari

result in Edge (no errors in console either)

来源:https://stackoverflow.com/questions/39763693/workaround-for-blob-as-src-to-iframe-in-edge

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!