我这里的情况有点特殊:
我正在使用 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> 内有效，但不会影响我页面上的其他表格和字体。
最佳答案
此问题是由元素样式和 css 导入规则引起的。
以您在 style 标签中使用的 thead 为例，因为导入元素中的 style 标签比任何其他样式具有更高的优先级，它将应用于任何其他样式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 也可以工作。
关于javascript - 当我需要将来自其他资源的 HTML 代码添加到我的页面时如何防止 CSS 泄漏，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/53381120/