Question

我们正在进行POC，我们要求客户仅在该网站中添加脚本标签。脚本标签是指我们网站中的javascript文件。执行脚本标签后，我们使用脚本标签的位置将HTML代码注入到父网站中。

我们注入的HTML代码包含css类，这些类在我们的网站中没有任何定义，因此它从父网站获取了基本HTML标记的继承的css。

问题是如何检查父站点是否在样式表文件中实现了类，以便如果父站点中未定义任何类，那么我们可以为我们的类添加默认定义。

示例：假设我们注入的HTML代码段包含以下div。

<p>Property Details</p>

假设父站点具有

标记的css定义，如下所示

p
{
    font-size: 16px;
    font-weight: bold;
}

并且可以说我们引用了自己的css文件路径，该路径也具有

的定义，如下所示

p
{
    background-color: yellow;
}

（请注意：父网站的样式表引用将始终位于HTML代码段的样式表引用上方。）

在上述情况下，

的样式应为16px，字体粗体（在父网站css文件中定义）。

但是，如果父站点css文件没有针对

的定义，则

的样式应为背景黄色，这是在我们的HTML代码段中定义的。

Answer 1

您可以尝试这样的操作（如Cray在评论中建议的那样）

function isDefined(selector) {
  for (var i = 0; i < document.styleSheets.length; i++) {
    var sheet = document.styleSheets[i];
    for (var j = 0; j < sheet.cssRules.length; j++) {
      return sheet.cssRules[j].selectorText == selector;
    }
  }
}

var styleElement = document.createElement("style");
styleElement.type = 'text/css';
document.head.appendChild(styleElement);

var myStylesheet = document.styleSheets[document.styleSheets.length - 1];

if (!isDefined("p")) {
  myStylesheet.insertRule("p { background-color: yellow; }")
}

if (!isDefined("h1")) {
  myStylesheet.insertRule("h1 { background-color: yellow; }")
}

p {
  font-size: 12px;
}

<h1>hello</h1>
<p>world</p>

这是一个简单的示例，但是如果要处理客户端定义p.class-name或div p选择器的情况，则需要扩展它。
请注意，由于这些选择器的优先级较高，因此客户端可以替代您的更改作为解决方法。

如何检查CSS类是否在网站中实现？

1 个答案: