17

我正在开发一个在我无法控制的网页上注入 JS+CSS+HTML 的项目。

我担心我的注入代码的主机页面样式——我希望我注入的代码只服从我的样式，而不是他们的样式。

目前，我能想到的唯一方法是为 container<div>的类明确指定每个可能的标签（使用预定义的、已知的浏览器默认值），并依靠继承将这些规则传播到我的其余部分注入的 HTML。这个 CSS 需要出现在页面<head>标签的底部。

不过，我不认为这是最好的解决方案，我也不期待实施它。当然还有更好的方法。

4

6 回答 6

12

其他人提出了很好的方法来防止你的 CSS 影响页面，以及确保你的 CSS 优先，但你似乎最关心页面的 CSS 影响你——也就是说，添加一个时髦的、意想不到的样式（比如所有 div 都有粉红色背景）。

我能想到的防止他们的样式影响您注入的代码的唯一方法是让您将注入的内容沙箱化，例如在iframe. padding否则，您必须定义的东西太多了 - 您必须在 " " 选择器（或者更好的是， " border" ，所以你只需覆盖你自己的内容），这样你就可以保证对你的 CSS 的绝对控制。marginbackground*#yourid *

编辑：我意识到后一种解决方案不一定会太痛苦，如果您使用全向选择器将所有内容重置为基线：

#myid * {
    somestyle1: default;
    somestyle2: default;
    ... 
}

我发现有人写了这样的解决方案。如果您在页面上向下滚动足够远，您会看到它（来自 SuzyUK）。它看起来并不完整，但肯定是一个好的开始。

（我也很想知道是否有防止这种情况的好方法。在将代码注入页面之前，我已经编写了 Greasemonkey 脚本，并且不得不编写 CSS 来覆盖页面的 CSS，但在这些情况下，我知道我的目标是谁，并且可以直接针对页面定制我的 CSS。）

于 2009-04-09T04:17:55.240 回答
3

用专门分类的 包裹注入的 HTML <div>，例如

<div class="my-super-specialized-unique-wrapper"><!--contents--></div>

然后在您的 CSS 中，为所有规则添加前缀并在每条规则上.my-super-specialized-unique-wrapper使用!important 。这将指示客户端浏览器将您的规则视为任何匹配元素的至高无上的规则，而不管可能针对它们的任何其他样式 - 即使您无法控制的其他规则更具体。

于 2009-04-09T04:12:37.283 回答
1

你只需要非常具体地使用你的 CSS 选择器。也就是说，比主机页面的 CSS 规则更具体。您可能还想添加一种全局 CSS 重置，修改为仅重置您的 HTML。我的意思是指将所有颜色、背景、字体、填充等重置为单一标准的东西。从那里你可以建立自己的风格。

于 2009-04-09T04:12:17.080 回答
1

为什么不注入像这样的内联格式的 html 元素：

<p style="color:red">This to be injected</p>

内联样式优先于任何其他规则，并且您已经在创建标记以插入它。

其他解决方案是在您的元素上使用非常具体的 DOM id，然后在您添加的 CSS 上设置它们的样式

于 2009-04-09T04:14:06.670 回答
0

如果您使用的是 Mozilla 浏览器，您实际上可以（如果非法）将可见的 DOM 内容添加到 <body> 元素之外的 <html> 元素。这将避免任何与正文匹配并由您的内容继承的样式。某些样式可能会在 html 上匹配，这会破坏这种技术，但我发现它很有用。

例如。使用 jquery： $('html').append('<div id="mycontent"> blah blah blah </div>');

当您不希望您的库实例干扰由您正在修改的页面定义的库的使用时，使用流行的库本身就是一个挑战。Greasemonkey 的“@require”对我不起作用。我发现有必要（但可能！）保存由 jquery 脚本分配的两个或三个全局名称的任何现有值，将我的库实例插入 DOM，等待它被加载（必须使用计时器，这很烦人，但我看不到解决方法），缓存分配给我自己命名空间中的全局变量的值以供我自己使用，并恢复保存的值。

于 2009-04-23T06:57:26.383 回答
0

我不确定应该如何使用它，浏览器对此的支持，但它是使用http://www.w3.org/TR/shadow-dom/的主要原因之一

这个想法是您可以插入一个 Web 组件，该组件可以完全设置样式并具有仅影响 shadow-DOM 的特定事件（因此您的模块不会影响页面的其余部分）。

于 2015-05-03T21:38:57.997 回答