Javascript 将html注入现有页面而不受css影响_Javascript_Jquery_Css_Html

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

javascript jquery css html

Javascript 将html注入现有页面而不受css影响,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我需要在不受页面css影响的情况下向现有页面注入一些html内容我搜索并找到一种叫做阴影dom的东西当我尝试应用解决方案时，出现了错误 <script type="text/javascript"> var host = document.querySelector('#content'); var shadowRoot = host.createShadowRoot(); </script> var host=docu

我需要在不受页面css影响的情况下向现有页面注入一些html内容

我搜索并找到一种叫做阴影dom的东西

当我尝试应用解决方案时，出现了错误

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

        var shadowRoot = host.createShadowRoot();

    </script>


var host=document.querySelector（“#content”）；
var shadowRoot=host.createShadowRoot（）；

未捕获的TypeError:无法读取null的属性“createShadowRoot”

createShadowRoot（）已被弃用。单击此处获取更多信息：

元素。createShadowRoot（）

已被弃用，取而代之的是

元素。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);

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

您可以使用tag来实现这一点

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

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

newPage.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>

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

Iframe页面粗体

如果在浏览器中访问主页，您将看到两段：

主页粗体（将以粗体显示）

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>


var iframe=document.createElement（'iframe'）；
var html='Iframe页面加粗；
iframe.src='数据：text/html；字符集=utf-8，'+encodeURI（html）；
document.body.appendChild（iframe）；

您可以使用标记来实现这一点

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

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

newPage.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>

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

Iframe页面粗体

如果在浏览器中访问主页，您将看到两段：

主页粗体（将以粗体显示）

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>


var iframe=document.createElement（'iframe'）；
var html='Iframe页面加粗；
iframe.src='数据：text/html；字符集=utf-8，'+encodeURI（html）；
document.body.appendChild（iframe）；

将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>";

（用元件更换阀体）

如果需要在iframe上设置其他样式，只需将其链接到

。

另外，不要忘记设置

边框：无在CSS中使用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>";

（用元件更换阀体）
如果需要在iframe上设置其他样式，只需将其链接到。
另外，不要忘记设置边框：无
在您的CSS中
它看起来像是createShadowRoot（）
已经被弃用了，并且在浏览器中没有太多的支持：您可以使用iframe
这个功能已经从Web标准中删除了
，尽管错误（host
为null
）表明找不到内容。@mark\m，那么还有其他解决方案吗？@HTMLHELL，你能告诉我plzIt看起来像是createShadowRoot（）
已经被弃用了，在浏览器中没有太多的支持：你可以使用iframe
虽然错误（host
为null
）但是这个功能已经从Web标准中删除了表示未找到#内容
。@mark\m，有其他解决方案吗？@htmlhell，你能给我指点迷津吗