當我需要從其他資源向頁面添加HTML代碼時，如何防止CSS泄漏

Question

我這里的情況有點特殊：

我正在使用Vue.js，Vuetify和OpenLayers創建一個應用程序。 向用戶顯示有關圖層的有用信息。

在我的Vue組件之一中，我想向用戶展示WMSFeatureInfo 。 實際上是String中的 HTML代碼。 （當我使用HTTP GET方法查詢WMS層時，總是返回一個字符串，其中包含String中的HTML代碼）

我向用戶顯示此HTML字符串的方式是這樣的：（我將跳過如何獲取HTML字符串的部分，因為它與該問題無關）

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

問題是，HTML字符串中還包含CSS樣式 ，並且泄漏出去了。 因此，每次我發送HTTP GET請求后，獲取此HTML字符串的響應並將信息呈現給用戶，我的整個應用程序的字體，表格背景顏色等都將發生變化 （很明顯，HTML字符串中的CSS樣式是覆蓋我自己的CSS樣式）。

有沒有一種方法可以將收到的HTML代碼放在頁面上，而忽略其中的CSS代碼？ 或者，也許有一種方法可以使vuetify的CSS始終比其他更強大？

為了使問題更清楚，這是我從GET請求中獲得的HTML字符串：

<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容器之外）將顯示綠色背景。

我希望此HTML代碼的CSS樣式僅在<div>內部起作用，而不對頁面上的其他表和字體起作用。

Answer 1

此問題是由元素樣式和CSS導入規則引起的。 以您在style標簽中使用的thead為例，因為導入元素中的樣式標簽比其他樣式具有更高的優先級，因此它將比thead元素上的其他樣式具有更高的優先級。

我認為可以通過使用類名設置樣式而不是元素樣式來避免此問題。 由於響應的創建者未執行此操作，因此您可以使用JS將其解析為HTML並過濾出樣式標簽。 使用DOMParser和標准DOM元素API。 然后遍歷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也可以使用。

Answer 2

Vue.use（Vuetify，{theme：false}）;

將完全禁用html內主題樣式的添加。 這意味着您將不再有顏色：白色按鈕上的白色和黑色圖標上的白色

為了使它們再次正常工作（以一種更加受控制的方式），我將先前生成的CSS <head><style id="vuetify-theme-stylesheet">...</style>移至資產/包含主題。較少的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>

您可能需要添加到webpack中，以構建less-loader軟件包以加載less文件：)

主題顏色又回來了！

當我需要從其他資源向頁面添加HTML代碼時，如何防止CSS泄漏

問題描述

2 個解決方案

解決方案1
0 2018-11-20 11:16:30

解決方案2
0 2018-11-22 10:13:45

當我需要從其他資源向頁面添加HTML代碼時，如何防止CSS泄漏

問題描述

2 個解決方案

解決方案1 0 2018-11-20 11:16:30

解決方案2 0 2018-11-22 10:13:45

解決方案1
0 2018-11-20 11:16:30

解決方案2
0 2018-11-22 10:13:45