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

Question

I have to make a call from my Web app to a 3rd party web service, which will will return an HTML document, that i want to in-turn include on my page; 我必须从Web应用程序调用第3方Web服务，该服务将返回一个HTML文档，该文档要依次包含在我的页面中； basically consuming syndicated self-contained promotional "chunks" of html (which include the CSS to layout/style them as the syndicator intended). 基本上消耗了html的联合的独立的促销“块”（包括CSS，用于按联合对象的意图对其进行布局/样式设置）。

Is there a way to do this and isolate the HTML without using iframes (since its hard to tell how to size the iframe)? 有没有一种方法可以在不使用iframe的情况下隔离HTML，因为很难分辨iframe的大小？ I'd like to ensure that 1) the incoming CSS/JS doesn't impact the rest of the page, and vice versa - i don't want the greater page's styles to impact the view of the promo content. 我想确保1）传入的CSS / JS不会影响页面的其余部分，反之亦然-我不希望更大的页面样式影响促销内容的视图。

Is there something that can be done with Shadowdom/shadowdom-polyfills? Shadowdom / shadowdom-polyfills是否可以完成某些工作？ or Web components? 还是Web组件？

It seems like the Twitter/Instagram are able to do do this someone? 似乎Twitter / Instagram能够做到这一点？

Answer 1

You can make it in web components import way: 您可以通过Web组件导入方式进行制作：

Reference your HTML resource: 参考您的HTML资源：

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

Access and use imported content through JavaScript 通过JavaScript访问和使用导入的内容

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

Let's say warnings.html contains: 假设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>

Importers can grab a specific portion of this document and clone it into their page: 导入者可以获取此文档的特定部分并将其克隆到其页面中：

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

Tip: Don't forget that if the HTML origin is external, the resource server must be cors-enabled. 提示：不要忘记，如果HTML源是外部的，则资源服务器必须启用了cors功能。

Example extracted from here 从这里摘录的例子

Answer 2

With Shadow DOM you can isolate CSS. 使用Shadow DOM，您可以隔离CSS。

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

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

Unfortunately you won't be able to isolate Javascript. 不幸的是，您将无法隔离Javascript。

For Javascript isolation, the only way is <iframe> with the sandbox attribute as stated by @zero298. 对于Java隔离，唯一的方法是<iframe> ，其sandbox属性如@ zero298所述。

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

问题描述

2 个解决方案

解决方案1
2 2018-10-01 20:33:46

解决方案2
1 已采纳 2018-10-02 12:42:50

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

问题描述

2 个解决方案

解决方案1 2 2018-10-01 20:33:46

解决方案2 1 已采纳 2018-10-02 12:42:50

解决方案1
2 2018-10-01 20:33:46

解决方案2
1 已采纳 2018-10-02 12:42:50