Fatal编程技术网
  • javascript/
  • Javascript 如何在注入的HTML片段中防止CSS干扰？

Javascript 如何在注入的HTML片段中防止CSS干扰？

javascript jquery html css

Javascript 如何在注入的HTML片段中防止CSS干扰？,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我目前正在开发一个Safari扩展，它使用注入的脚本向当前网页进一步注入一些HTML，并注入一些其他脚本使其工作。这一切都很好，但问题是注入的HTML受到网页已经导入的CSS样式表的影响。例如，HTML在Google.com上看起来很完美（它的CSS样式相对较少），但在StackOverflow.com上却很糟糕（它为按钮等设置样式） jQuery是在显示这个HTML时被注入到网页中的，所以我可以使用它。我尝试了各种方法，包括遍历所有元素并对每个元素调用removeClass（），但都没有效果。

我目前正在开发一个Safari扩展，它使用注入的脚本向当前网页进一步注入一些HTML，并注入一些其他脚本使其工作。这一切都很好，但问题是注入的HTML受到网页已经导入的CSS样式表的影响。例如，HTML在Google.com上看起来很完美（它的CSS样式相对较少），但在StackOverflow.com上却很糟糕（它为按钮等设置样式）

jQuery是在显示这个HTML时被注入到网页中的，所以我可以使用它。我尝试了各种方法，包括遍历所有元素并对每个元素调用
removeClass（）
，但都没有效果。我还尝试添加“CSS重置”类等，但似乎没有任何效果

防止CSS干扰我的HTML的最佳方法是什么？

你不能阻止这种情况发生。但是，您可以覆盖CSS规则。给你的主元素一个唯一的id（通过模糊处理，它应该是唯一的，比如“yourapplicationname\u mainelement\u name”之类），然后覆盖所有可能给你的html带来奇怪效果的样式

您的插件：

<div id="yourapplicationname_mainelement_name">
  <p>My paragraph that must not be styled</p>
</div>
由于css样式规则是最具体的，给定id，它们将覆盖注入html的页面上的任何设置

进一步。。。可能很难看出哪些规则是最重要的。您可以使用firebug或类似的工具来理解哪个正在覆盖另一个。在开发应用程序时，如果没有它，您将很困难。

这是一个困难的问题。在我看来有两个选择。 您可以在所有内容周围设置一个包装div，并在所有css前面加上该div。例如：

<body>
  <div class='wrappingDiv'>
     ...
  </div>
</body>
然后，在注入jquery时，使用它关闭内容之前的初始包装div，并在另一个包装div中包装下面的任何内容

问题：

  • 只有在注射的情况下才可能 将其他网站内容转移到您自己的网站上 地点
  • 这可能会变得复杂 取决于你注射的地方 html
    • 另一个选项是加载专门针对注入的html的重置样式表。在这种情况下，只有注入的html会被包装，但在添加自己的样式之前，您需要一个css文件将所有标记的所有属性重置为默认值。这里没有真正的问题，只是不太优雅

    另一种方法是使用一个元素，它不像iframe那样继承样式表，但也有它自己的问题……

    我在不同的插件上看到，它们将代码放在iframe中，并使用JS与页面的其余部分交互，因此您无法更改其中的css

    我还看到，在注入html代码时，人们使用标签中的“style”属性设置插件内容的样式，因此浏览器将优先考虑style属性中的css，而不是css文件。其思想是覆盖css，通常使用“！important”子句。但是在不同的浏览器上可能会出现一些问题

    编辑我忘了说我的答案是关于你在别人的页面上插入代码，而你无法直接控制css的情况

    我尝试了类似的方法，但我认为类名可能有冲突或其他问题。这似乎是正确的方式。谢谢 
    <body>
  <div class='wrappingDiv'>
     ...
  </div>
</body>

    .wrappingDiv * {}