Question

我必须从我的Web应用程序调用第3方Web服务，该服务将返回一个HTML文档，该文档要依次包含在我的页面中；基本消耗html的联合的，独立的促销“块”（包括CSS，以按联合者的意图对其进行布局/样式设置。）

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

Shadowdom / shadowdom-polyfills是否可以完成某些工作？或Web组件？

似乎Twitter / Instagram可以做到这一点？

Answer 1

您可以通过导入方式在Web组件中创建它：

参考您的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隔离，唯一的方法是使用{zero1声明的具有<iframe>属性的sandbox。

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

2 个答案: