If you're just here for the answer, not the story, the solution is at the bottom.
If you've ever used JSFiddle, Codepen, or others, this problem w...
For further actions, you may consider blocking this person and/or reporting abuse
This was one of the most amazing solutions I have seen. I was constantly trying to load html contents inside iframe and all methods were failing. This method worked like a charm. Thank you for such marevellous solution and a great story.
IE11 does support Blob URLs but not for type text/html and also not for usage in an iframe: caniuse.com/#feat=bloburls
Just putting this here so others don't waste time trying this solution as an alternative for srcDoc in IE11.
Try this one in IE11 codepen.io/grimen/pen/lBuiG/
Thank you very very much, Hendrik! Indeed, text/html cannot be used in IE11
Hi Josh, This was an amazing article and help me to resolve the error but the line for js inside the source variable, inside the head tag generates an error when I load my page then it shows js on the web pages. When I remove the js script "${js &&
<script src="${jsURL}"></script>}" then it works properly. Also console show error SyntaxError: unterminated string literal.Do blobs or the "text/css" type have a 32k-character limit? Varies between browsers?
stackoverflow.com/questions/695151...
ibm.com/support/knowledgecenter/SS...
Hi Josh, i'm eager to use blobs! To use your barebone code, don't i need to put something in the page-load event, so the iframe gets rendered before the blob-code runs? I mean, couldja put a lil' meat on the bones? :) Thx!
If your
<script>is placed at the bottom of the<body>, it should run after the iframe exists in the DOM, so you're all good. If you're placing the<script>inside the<head>then you would need to grab the iframe and set its source after the body loads.Wow, I found this really helpful. Thanks!
That's awesome to hear! Let me know if you have any questions. 😀
Help me in my react project, Thanks!
I have the following object comming from the backend an want to render it in iframe.
{
index.html:"respective code...",
style.css:"respective code...",
script.js:"respective code..."
}
Your soution is great but it doesn't seem right to inject the JS and CSS in HTMl file. Is there any potential way to do it without injecting?
Thank you very much for this helpful article. It helped me a lot in my project. Thanks!
That's good to hear! :)
right now I'm using zoid as it promise security as first layer. Do you have other alternative
Nice solution, thanks
Do you know maybe is it possible to add CDN reference somehow?
I have tried this solution in my project but I got the [object HTMLDivElement] inside the iframe, why??
Hi Josh thanks a lot for this - is it possible to load into an iframe a combination of html and scripts with one long string using this method? Thanks! R