iframe document.write中的javascript覆蓋父文檔

Question

我想通過Javascript將HTML作為字符串加載到iframe 。 像這樣：

$('#iframe1').contents().find('html').html("<h1>This is an iframe</h1>");

直到我發現，在這種HTML向上的Javascript之類的document.write它們正在寫入錯誤的文檔->父文檔！

這是一個顯示它的柱塞： http ://plnkr.co/edit/YQAqqSDCVKnP3uhLj4lF?p=preview

如果我通過src將相同的HTML作為外部文檔通過src加載到iframe ，則document.write將轉到iframe （而不是父document.write ），這正是我所期望的。

有一些見解嗎？ 如何告訴瀏覽器在執行Javascript之前正確創建iframe文檔作用域？

---

PS：其目的是為了預覽，因此我注入了（可信任！）源的HTML代碼，但在該代碼中允許document.write。

Answer 1

好。 srcdoc在這里srcdoc 。

$('#iframe1').attr({srcdoc:intrusiveHTML});

我更新了Plunker。

使用srcdoc ，Javascript不會隨文檔范圍而滑落。

它在IE中不起作用（ http://caniuse.com/#feat=iframe-srcdoc ），因此另外使用Polyfill可能會有所幫助： https : //github.com/jugglinmike/srcdoc-polyfill

但是我還沒有測試。

Answer 2

代替使用document.write ，而使用document.getElementById('iframe1').contentWindow.document.write 。 因為當您指向文檔時它將獲取主窗口文檔，所以我們需要指出需要使用哪個iframe副本。