如何在网页上单独包含第 3 方 HTML 片段？

Question

我必须从我的 Web 应用程序调用第 3 方 Web 服务，这将 return 一个 HTML 文档，我想反过来将其包含在我的页面上；基本上消费 html 的联合独立促销 "chunks"（其中包括 CSS 到 layout/style 它们作为联合组织的意图）。

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

Shadowdom/shadowdom-polyfills有什么可以做的吗？还是 Web 组件？

Twitter/Instagram 好像有人可以做到这一点？

Answer 1

可以在web components import中制作：

引用您的 HTML 资源：

<link rel="import" href="http://example.com/elements.html">

通过JavaScript

访问和使用导入的内容

var content = document.querySelector('link[rel="import"]').import;

假设 warnings.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>

进口商可以抓取本文档的特定部分并将其克隆到他们的页面中：

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

提示：不要忘记，如果 HTML 来源是外部的，资源服务器必须启用 cors。

示例摘自here

Answer 2

用 Shadow DOM 你可以隔离 CSS。

promo.attachShadow( { mode: 'open' } )
     .innerHTML = `
        <style> 
          div { color: red ; }
        </style>
        <div>Isolated CSS style</div>`

<div id="promo"></div>

很遗憾，您将无法隔离 Javascript。

对于 Javascript 隔离，唯一的方法是 <iframe> 和 @zero298 所述的 sandbox 属性。

如何在网页上单独包含第 3 方 HTML 片段？

How to include 3rd party HTML snippet in isolation on web page?

html

javascript

css

shadow-dom