在iframe的文檔和/或shadow-root中注入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);

如何在#shadow-root注入我的'text.html'？

原因是，當我使用elt.src = url ，它不會將html內容包裝在#document或#shadow-root ，這會導致錯誤 - （iframe中未包含在#document內容模糊或#shadow-root - bug報告 ）

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()