Question

我需要将一些html内容注入到现有页面中，而不受页面CSS的影响

我搜索并找到了一个称为“影子dom”的东西

当我尝试应用解决方案时，发生了错误

<script type="text/javascript">
        var host = document.querySelector('#content');

        var shadowRoot = host.createShadowRoot();

    </script>

未捕获的TypeError：无法读取null的属性'createShadowRoot'

Answer 1

Element.createShadowRoot()已弃用Element.attachShadow()。

您可以使用：

// Get content
var content = document.querySelector('#content');

// Create shadow root
var shadow = content.attachShadow({mode: 'open'});

// Create text node
var text = document.createElement('span');
text.textContent = "hello";

// Append it to the shadow root
shadow.appendChild(text);

Answer 2

您可以使用<iframe>标签来达到目的。

您需要将新的HTML分成一个新页面，然后在您的主页中调用它：

<iframe src="newPage.html"></iframe>

在newPage.html中，您应该插入所有您不想受到主页CSS影响的HTML。

示例：

main.html

<p class="bold">Main page bold</p>

<iframe src="newPage.html"></iframe>

<style>
.bold { font-weight: bold }
iframe {
    border: none;
    padding: 0;
    margin: 0;
}
</style>

newPage.html

<p class="bold">Iframe page bold</p>

如果您在浏览器中访问主页，则会看到2个段落：

主页以粗体显示（将以粗体显示）
iframe页面以粗体显示（不会以粗体显示）

如果您不想创建新页面，也可以使用JavaScript创建iframe，并用HTML填充它，如下所示：

<script>
var iframe = document.createElement('iframe');
var html = '<p class="bold">Iframe page bold</p>';
iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
document.body.appendChild(iframe);
</script>

Answer 3

createShadowRoot（）已被弃用。单击此处以获取更多信息：https://developer.mozilla.org/en-US/docs/Web/API/Element/createShadowRoot

Answer 4

将iframe与srcdoc一起使用。这就是HTML消息在我的聊天中的工作方式。

var iframe = document.createElement("iframe");
// iframe.sandbox().add(...) // if you need some security
iframe.srcdoc = "<html><head><style>body {margin: 0;}</style></head><body>" + <your code> + "</body></html>";

然后将其添加到元素

document.body.appendChild(iframe);

（用您的元素替换正文）

如果您需要在iframe上设置其他样式，只需将其与<link rel="stylesheet">链接即可。另外，不要忘记在CSS中设置border: none;

将html注入现有页面而不受CSS影响

4 个答案: