在iframe的文档和/或影子根中注入html dom

Question

我使用javascript (使用chrome扩展)将iframe注入到网页上。使用javascript，我创建iframe，我可以访问html的url，所以我想我可以使用$.get获取DOM

var elt = document.createElement('iframe');
elt.id = 'my_iframe';

$.get(chrome.extension.getURL('views/test.html'), function(doc) {

    var container = document.querySelector('#my_iframe');

    console.log(container.documentContent);  // can access
    console.log(container.shadowRoot); // can't access

    // ideally:
    container.shadowRoot($(doc));
    container.contentDocument($(doc));

});

document.getElementsByTagName('body')[0].appendChild(elt);

​

​

如何将'text.html‘注入#shadow-root

原因是，当我使用elt.src = url时，它不会将html内容包装在#document或#shadow-root中，这会导致错误-(如果不使用#document或#shadow-root -错误报告包装，则会在iframe中出现模糊内容)。

Answer 1

如果您只是在更改iframe的内容，则可以通过以下方法进行：

const iframe = document.querySelector('#myIframe')
iframe.outerHTML = '<iframe></iframe>' // clears the iframe
iframe.contentDocument.open()
iframe.contentDocument.write(yourHTMLText)
iframe.contentDocument.close()