Как предотвратить утечку CSS, когда мне нужно добавить HTML-коды из другого ресурса на мою страницу - PullRequest
Новая
       8

Как предотвратить утечку CSS, когда мне нужно добавить HTML-коды из другого ресурса на мою страницу

0 голосов
/ 19 ноября 2018

Ситуация здесь у меня особенная:

Я использую Vue.js, Vuetify и OpenLayers для создания приложения. который показывает полезную информацию о слоях для пользователя.

В одном из моих компонентов vue я хочу показать пользователю WMSFeatureInfo . что на самом деле HTML-коды в String . (Когда я запрашиваю слой WMS с помощью метода HTTP GET, я всегда получаю строку назад, которая содержит HTML-коды в строке)

То, как я показываю пользователю эту строку HTML, выглядит следующим образом: (я пропущу часть, как получить строку HTML, потому что она не связана с этим вопросом) 

<v-container
    align-content-center
    v-html="feature.WMSFeatureInfo"
>
</v-container>

Проблема в том, что строка HTML содержит и стили CSS в ней , и она просачивается. Таким образом, каждый раз, когда я отправляю HTTP GET Request, получаю ответ этой HTML-строки и представляю информацию пользователю, шрифт всего приложения, цвет фона таблицы и т. Д. Будут меняться (Очевидно, CSS стили в строке HTML перезаписывают мой собственный стиль CSS).

Есть ли способ, которым я могу разместить полученные HTML-коды на своей странице, но игнорировать CSS-коды в ней? Или, может быть, я могу сделать CSS из vuetify всегда сильнее, чем другие?

Чтобы сделать вопрос более понятным, это строка HTML, которую я получил из запроса GET: 

<html xmlns:esri_wms="http://www.esri.com/wms" xmlns="http://www.esri.com/wms">
<head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8"></meta>
<style type="text/css">sub{font-family: arial;color: #202020} table, th, td {border:1px solid #e5e5e5;border-collapse:collapse; padding: 3px;font-family: arial;color: #202020;} table { margin-bottom:10px; }  thead { font-weight: bold; }tbody { font-size: 80%; }th, td {valign: top;text-align: left;} thead td, th, .property_name {background-color: #75AE7E;}       </style>
</head>
<body>
<table width="100%" cellpadding="0" cellspacing="0" border="0">
<colgroup>
<col width="30%"/>
<col/>
</colgroup>
<thead>
<tr><td colspan="2">schummerung</td></tr>
</thead>
<tbody>
<tr>
<td class="property_name">Stretchedvalue</td>
<td class="property_value">181</td>
</tr>
<tr>
<td class="property_name">PixelValue</td>
<td class="property_value">181</td>
</tr>
</tbody>
</table>
</body>
</html>

Так что после того, как я добавлю эти HTML-коды к своему <v-container> (это просто <div>), мои другие таблицы на странице (вне контейнера div) получат зеленый фон.

Я хочу, чтобы CSS-стили этого HTML-кода действовали только внутри <div>, но не влияли на другие мои таблицы и шрифты на моей странице.

Ответы [ 2 ]

0 голосов
/ 22 ноября 2018

Vue.use (Vuetify, { тема: ложь });

Полностью отключит добавление стиля темы в HTML. Это означает, что у вас больше не будет цветов: белые на белых кнопках и белые на черных значках

Чтобы заставить их работать снова - конечно, более контролируемым образом - я перенес ранее сгенерированный css <head><style id="vuetify-theme-stylesheet">...</style> в assets /aged-theme.less vue-app/ - node_modules/ - public/ - src/ - assets/ - contained-theme.less - components / - App.vue - main.js - package.json Моя содержательная тема выглядит так: 

.vuetify-container {
  ...copy the #vuetify-theme-stylesheet css here
}

И он должен быть импортирован в ваш main.js 

import Vue from 'vue';
import App from './App.vue';

import Vuetify from 'vuetify';
import './assets/contained-theme.less'; // <--------

Это предотвращает применение CSS вне корневого компонента вашего приложения. 

<v-app id="app" class="vuetify-container">
    <HelloWorld/>
</v-app>

Возможно, вам понадобится добавить в ваш веб-пакет сборку пакета less-loader для загрузки файла less:)

цвета темы снова вернулись!

0 голосов
/ 20 ноября 2018

Эта проблема вызвана стилем элементов и правилами импорта CSS. Возьмем, к примеру, thead, который вы используете в своем теге style, поскольку тег стиля в импортированном элементе имеет более высокий приоритет по сравнению с любым другим стилем, который он будет применять над любым другим стилем элемента thead.

Я думаю, что этой проблемы можно было бы избежать, если использовать стили классов вместо имен элементов. Поскольку создатель ответа не сделал этого, вы можете проанализировать его в HTML с помощью JS и отфильтровать тег style. используя DOMParser и стандартные API-элементы DOM. После этого выполните цикл parsedDocument.body и поместите элементы в целевой элемент.

Я думаю, что это должно сработать, если вы не хотите сохранить стили. В этом случае вы можете вручную скопировать стили и добавить их в таблицу стилей, вложенную в целевой элемент. 

// Initiates parser
const parser = new DOMParser();

// Returns Document object (can be used as Document.getElementById('etc'))
let parsedDoc = parser.parseFromString('<html><style>thead{background: #000}</style></html>', 'text/html');

// Gets first style tag
let styleTag = parsedDoc.getElementsByTagName('style')[0];

// Removes first style tag
parsedDoc.head.removeChild(styleTag);

// Removes reference to the style tag
styleTag = null;

// Place each element in the target element
for (let element of parsedDoc.body.children) {
    // document.getElementById('target').appendChild(element);
}

Если это не желаемый результат или неопрятный по стандартам проекта, Iframe также будет работать.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...