Question

我尝试了下面的代码，但它完全替换了iframe中的内容：

@ViewChild('iframe') iframe: ElementRef;

let content = '<h1>TEST CONTENT</h1>';
let doc = this.iframe.nativeElement.contentDocument;
doc.open();
doc.write(content);
doc.close();

如何在不替换的情况下将html内容附加到iframe中？

Answer 1

doc.open（） removes所有文档内容

您应该按照注释中的建议将文本添加为文本，或将其附加在ex内。 body

doc.body.append(content)

Answer 2

this.iframe.nativeElement.contentWindow.frames.document.body.insertAdjacentHTML('beforebegin', contentToAppend);

这对我有用。我用ElementRef和@ViewChild在Angular中获得了iframe元素，然后向下挖掘到它的HTML正文，并使用insertAdjacentHTML方法将HTML内容附加到所需位置，可以作为beforebegin使用。，afterbegin，beforeend和afterend。

Answer 3

insertAdjacentHTML的工作方式与innerHTML类似，但比innerHTML快。 element.insertAdjacentHTML（position，text）;

'beforebegin': Before the element itself.
'afterbegin': Just inside the element, before its first child.
'beforeend': Just inside the element, after its last child.
'afterend': After the element itself.

详细信息：https://developer.mozilla.org/en-US/docs/Web/API/Element/insertAdjacentHTML

       @ViewChild('iframe') iframe: ElementRef;
       let doc = this.iframe.nativeElement.contentDocument;
       doc.insertAdjacentHTML('beforeend', '<h1>TEST CONTENT</h1>');

希望对您有帮助。

Answer 4

代替此解决方案，您可以使用jquery Selector附加内容：

$("#specific_iframe_id").append(content);

如何将HTML内容附加到iframe？

4 个答案: