在 iframe 的文档和/或 shadow-root 中注入 html dom

Posted 2023-05-09

【中文标题】在 iframe 的文档和/或 shadow-root 中注入 html dom

【英文标题】：Injecting html dom inside iframe's document and/or shadow-root

【发布时间】：2018-10-02 23:46:14

【问题描述】：

我正在使用 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 中，这会导致错误 - （未包装在 @987654330 中时 iframe 中的内容模糊@ 或#shadow-root - bug report)

【问题讨论】：

您到底想要发生什么？你想通过 shadow-root 设置 iframe 的内容吗？你不能影子 root 是只读的

我也可以更改注入的.html。我需要这个的原因是因为当我使用iframe.src = chrome.extension.getURL('views/test.html'); 时，它不会生成#document 和#shadow-root，所以由于某种原因它会变得模糊。我需要一种方法将我的内容放入 #shadow-root

当我使用 elt.src = url; 时，它不会将 iframe 内容包装在 #document 或 #shadow-root 中

【参考方案1】：

如果您只是更改 iframe 的内容，您可以这样做：

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

【讨论】：

这不会将外部 html 放在 #document 或 #shadow-root 中。这不等于iframe.src = url吗？

你需要shadow-root做什么？

当 iframe 内容不在 #document 或 #shadow-root 内时，它会变得模糊。 Here is my bug report

我的回答确实将内容放入了#document

我无法完成这项工作。我试过container.contentDocument.write("<h1>Hello</h1>")，但没有运气。它删除现有的 iframe，并创建一个新的 iframe，并且不放置任何内容。如果为空也可以得到content.js:30 Uncaught TypeError: Cannot read property 'open' of null`