Fatal编程技术网
  • javascript/
  • Javascript 如何在网页上单独包含第三方HTML代码段？

Javascript 如何在网页上单独包含第三方HTML代码段？

javascript html css

Javascript 如何在网页上单独包含第三方HTML代码段？,javascript,html,css,shadow-dom,Javascript,Html,Css,Shadow Dom,我必须从我的Web应用程序打电话给第三方Web服务，该服务将返回一个HTML文档，我想在我的页面上包含该文档；基本上使用辛迪加自足的促销“块”html（包括CSS，用于按照辛迪加的意图对其进行布局/样式设置） 有没有一种方法可以做到这一点并在不使用iframe的情况下隔离HTML（因为很难说如何调整iframe的大小）？我想确保1）传入的CSS/JS不会影响页面的其余部分，反之亦然-我不希望较大页面的样式影响促销内容的视图 是否可以使用Shadowdom/Shadowdom多边形填充进行某些操作

我必须从我的Web应用程序打电话给第三方Web服务，该服务将返回一个HTML文档，我想在我的页面上包含该文档；基本上使用辛迪加自足的促销“块”html（包括CSS，用于按照辛迪加的意图对其进行布局/样式设置）

有没有一种方法可以做到这一点并在不使用iframe的情况下隔离HTML（因为很难说如何调整iframe的大小）？我想确保1）传入的CSS/JS不会影响页面的其余部分，反之亦然-我不希望较大页面的样式影响促销内容的视图

是否可以使用Shadowdom/Shadowdom多边形填充进行某些操作？还是Web组件

Twitter/Instagram似乎有人能做到这一点？

您可以通过web组件导入的方式实现：

参考您的HTML资源：

<link rel="import" href="http://example.com/elements.html">
比如警告.html包含：

<div class="warning">
    <style>
        h3 {
            color: red !important;
        }
    </style>
    <h3>Warning!</h3>
    <p>This page is under construction</p>
</div>
<div class="outdated">
    <h3>Heads up!</h3>
    <p>This content may be out of date</p>
</div>


h3{
颜色：红色！重要；
}
警告
这一页正在建设中

小心！
此内容可能已过时
进口商可以获取此文档的特定部分并将其克隆到其页面中：

<head>
    <link rel="import" href="warnings.html">
</head>
<body>
    ...
    <script>
        var link = document.querySelector('link[rel="import"]');
        var content = link.import;

        // Grab DOM from warning.html's document.
        var el = content.querySelector('.warning');
        document.body.appendChild(el.cloneNode(true));
    </script>
</body>


...
var link=document.querySelector（'link[rel=“import”]”）；
var content=link.import；
//从warning.html的文档中获取DOM。
var el=content.querySelector（'.warning'）；
document.body.appendChild（el.cloneNode（true））；
提示：不要忘记，如果HTML源代码是外部的，那么资源服务器必须启用cors

从

中提取的示例您可以在web组件中导入方式：

参考您的HTML资源：

<link rel="import" href="http://example.com/elements.html">
比如说警告。html包含：

<div class="warning">
    <style>
        h3 {
            color: red !important;
        }
    </style>
    <h3>Warning!</h3>
    <p>This page is under construction</p>
</div>
<div class="outdated">
    <h3>Heads up!</h3>
    <p>This content may be out of date</p>
</div>


h3{
颜色：红色！重要；
}
警告
这一页正在建设中

小心！
此内容可能已过时
进口商可以获取此文档的特定部分并将其克隆到其页面中：

<head>
    <link rel="import" href="warnings.html">
</head>
<body>
    ...
    <script>
        var link = document.querySelector('link[rel="import"]');
        var content = link.import;

        // Grab DOM from warning.html's document.
        var el = content.querySelector('.warning');
        document.body.appendChild(el.cloneNode(true));
    </script>
</body>


...
var link=document.querySelector（'link[rel=“import”]”）；
var content=link.import；
//从warning.html的文档中获取DOM。
var el=content.querySelector（'.warning'）；
document.body.appendChild（el.cloneNode（true））；
提示：不要忘记，如果HTML源代码是外部的，那么资源服务器必须启用cors

从

中提取的示例可以隔离CSS

promo.attachShadow（{mode:'open'}）
.innerHTML=`
div{颜色：红色；}
独立CSS样式`
使用可以隔离CSS

promo.attachShadow（{mode:'open'}）
.innerHTML=`
div{颜色：红色；}
独立CSS样式`
有些关联：特别是沙盒属性。有些关联：特别是沙盒属性。我建议添加您链接的博客条目的相关片段，以便（无论出于何种原因）如果文章被拒绝，未来的读者仍然可以引用他们需要的信息。在您的警告示例中，如果我在容器页面上有一个H3（不是导入的），我会冒险把H3全部变成红色吗？或者如果容器页面有一个“body h3{color:blue}”css规则，那么反对的警告不是蓝色（而不是红色）吗？我很难看到自动样式隔离。@empire29。是的，您必须将它们放在阴影DOM中以隔离导入的StylesHanks以清除它-这两个都是非常有用的答案@经验29是的，它们是互补的。我建议添加您链接的博客条目的相关片段，以便（无论出于何种原因）如果帖子被删除，未来的读者仍然可以引用他们需要的信息。在您的警告示例中，如果我在容器页面上有一个H3（而不是导入的），我会不会冒险将H3全部变为红色？或者如果容器页面有一个“body h3{color:blue}”css规则，那么反对的警告不是蓝色（而不是红色）吗？我很难看到自动样式隔离。@empire29。是的，您必须将它们放在阴影DOM中以隔离导入的StylesHanks以清除它-这两个都是非常有用的答案@是的，它们是互补的