Как включить сторонний HTML-фрагмент отдельно на веб-странице? - PullRequest
Новая
       8

Как включить сторонний HTML-фрагмент отдельно на веб-странице?

0 голосов
/ 01 октября 2018

Мне нужно позвонить из моего веб-приложения стороннему веб-сервису, который вернет HTML-документ, который я хочу включить в свою страницу;в основном потребляет синдицированные автономные рекламные «куски» html (которые включают CSS для макетирования / стилизации их по назначению синдикатора).

Есть ли способ сделать это и изолировать HTML, не используя iframes (так кактрудно сказать, как определить размер фрейма)?Я хотел бы убедиться, что 1) входящий CSS / JS не влияет на остальную часть страницы, и наоборот - я не хочу, чтобы стили больших страниц влияли на представление промо-контента.

Есть ли что-нибудь, что можно сделать с помощью Shadowdom / shadowdom-polyfills?или веб-компоненты?

Кажется, что Twitter / Instagram могут сделать это кому-то?

Ответы [ 2 ]

0 голосов
/ 02 октября 2018

С 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> с sandbox атрибут, указанный @ zero298.

0 голосов
/ 01 октября 2018

Вы можете сделать это в веб-компонентах import way:

Ссылка на ваш 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.

Пример извлечен из здесь

...