Как добавить HTML-контент в iframe?

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

вместо этого решения вы можете использовать jquery Selector для добавления вашего контента:

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

Answer 2

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

это сработало для меня.Я получаю элемент iframe в Angular с помощью ElementRef & @ViewChild, затем копаю в его тело HTML и добавляю содержимое HTML, используя метод insertAdjacentHTML, в нужную позицию, доступную как beforebegin, afterbegin, beforeendи afterend.

Answer 3

insertAdjacentHTML работает аналогично innerHTML, но быстрее, чем innerHTML.element.insertAdjacentHTML (позиция, текст);

'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

doc.open () удаляет все содержимое документа

Вы должны либо добавить свой текст в виде текста, как это предлагается в комментариях, либо добавить его внутри ex.body

doc.body.append(content)