Great idea to do this with an iframe.
The important factor to this problem is that DOM parsing/building is designed as a one-way street. The browser processes your HTML from top to bottom. To add/delete it uses a pointer, which is always at a specific point in the DOM at a time. The problem with asynchronously loaded scripts and document.write() is, that document.write() tries to put the content wherever the pointer is right now. It has no information itself where to put the content.
In this quick example I put the pointer at the end of the page, when the script tries to execute document.write(). That's not always the case! The async loading can finish whenever, meaning that, worst case, document.write() would slap its content just somewhere on your page, leading to obvious fails. That's why the browser warns and refuses to execute document.write() at all. A way better solution than having your content appear at a different place every time you refresh the page, depending on how long the async loading took. Imagine to have to debug something like that.
The <iframe> solution works, because <iframe>s are actually their own DOM inside the DOM, including the parsing process. I can remember how we used to avoid <iframe>s; things like that brought them back into the good parts of HTML.