iframe document.write中的javascript会覆盖父文档

时间:2015-10-14 16:01:27

标签: javascript iframe parent document document.write

我想通过Javascript将HTML作为字符串加载到iframe。 像这样:

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

这很有效,直到我发现,在这个HTML upcomming Javascript中,如document.write正在写入错误的文档 - &gt;父母!

这是一个展示它的Plunker: http://plnkr.co/edit/YQAqqSDCVKnP3uhLj4lF?p=preview

如果我通过src将相同的HTML加载到iframe作为外部文档,document.write将转到iframe(而不是父级),这正是我所期待的。

那里有一些见解吗? 如何在执行其Javascript之前告诉浏览器正确创建iframes文档范围?

PS:它的目的是为了预览目的,所以我注入了一个(受信任的!)源代码的HTML-Code,但在该代码中,允许使用document.write。

2 个答案:

答案 0 :(得分:1)

确定。 srcdoc在这里很有帮助。

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

我更新了Plunker。

使用srcdoc,Javascript不会随文档范围滑落。

它不能在IE(http://caniuse.com/#feat=iframe-srcdoc)中工作,所以它可能有助于另外使用Polyfill: https://github.com/jugglinmike/srcdoc-polyfill

但我还没有测试过。

答案 1 :(得分:0)

不使用document.write,而是使用document.getElementById('iframe1').contentWindow.document.write。 因为当您指向文档时它将采用主窗口文档,因此我们需要指出需要使用哪个iframe代码。