如何在注入的HTML片段中防止CSS干扰？
[英]How do I prevent CSS interference in an injected piece of HTML?
问题描述
I'm currently developing a Safari extension that uses an injected script to further inject some HTML into the current webpage, as well as injecting some other scripts to make it work. 
我目前正在开发一个Safari扩展，它使用注入的脚本进一步将一些HTML注入当前网页，并注入一些其他脚本以使其工作。 This is all working fine, but the issue is that the HTML that is injected gets affected by CSS stylesheets that the webpage has already imported. 这一切都运行正常，但问题是注入的HTML会受到网页已导入的CSS样式表的影响。 For example, the HTML looks perfect on Google.com (which has relatively little CSS styling), but awful on StackOverflow.com (which styles buttons etc). 例如，HTML在Google.com上看起来很完美（它具有相对较少的CSS样式），但在StackOverflow.com（样式按钮等）上却很糟糕。
jQuery is injected into the webpage at the time of this HTML being displayed, so I have that available. 在显示此HTML时，jQuery被注入到网页中，所以我可以使用它。 I've tried all kinds of things, including walking through all of the elements and calling removeClass() on each of them, to no avail. 我已经尝试了各种各样的事情，包括遍历所有元素并在每个元素上调用removeClass() ，但无济于事。 I've also tried to add "CSS reset" classes, etc, but nothing seems to be working. 我也尝试添加“CSS重置”类等，但似乎没有任何工作。
What's the best way to go around preventing the CSS from interfering with my HTML? 什么是阻止CSS干扰我的HTML的最佳方法？
3 个解决方案
解决方案1
5 已采纳 2010-08-22 09:38:23
You can't prevent that from happen. 你不能阻止这种情况发生。 However, you can override the CSS rules. 但是，您可以覆盖CSS规则。 Give your main element a unique id (which really should be unique by obfustation, like "yourapplicationname_mainelement_name" or something), then override all possible styles that might give strange effects on your html. 给你的主元素一个唯一的id（通过obfustation真的应该是唯一的，比如“yourapplicationname_mainelement_name”或其他东西），然后覆盖所有可能对你的html产生奇怪效果的样式。
Your plugin: 你的插件：
<div id="yourapplicationname_mainelement_name">
<p>My paragraph that must not be styled</p>
</div>
Your css: 你的css：
#yourapplicationname_mainelement_name p {
display: block;
color: black;
background: white;
position: relative;
... and so on ...
}
As your css style rules are the most specific, given your id, they will override any settings present on the page where your html is injected. 由于您的css样式规则是最具体的，根据您的ID，它们将覆盖注入html的页面上的任何设置。
Further... It might be hard to see what rules are the most important. 进一步......可能很难看出哪些规则是最重要的。 You can use firebug or similar to understand which is overriding another. 你可以使用firebug或类似的东西来理解哪一个覆盖了另一个。 You'll have a hard time without it when developing your application. 在开发应用程序时，您将很难没有它。
解决方案2
1 2010-08-22 09:53:28
that's a tough one. 这是一个艰难的。 two options as I see it. 我看到两个选项。 You could set a wrapping div around all your content and prefix all your css with that. 您可以围绕所有内容设置包装div，并为此设置所有css的前缀。 example: 例：
<body>
<div class='wrappingDiv'>
...
</div>
</body>
stylesheet: 样式表：
.wrappingDiv * {}
Then when you inject jquery use that to close off the initial wrapping div before your content and to wrap any following content in the another wrapping div. 然后，当您注入jquery时，使用它来关闭内容之前的初始包装div，并将任何后续内容包装在另一个包装div中。
Issues: 问题：
- Only possible if you are injecting other site content onto your own site. 只有在将其他网站内容注入您自己的网站时才可能。
- This could get complicated depending on where you are injecting html. 这可能会变得复杂，具体取决于您注入html的位置。
The other option is to load a resetting stylesheet that targets your injected html specifically. 另一个选项是加载一个重置样式表，专门针对您注入的html。 In this case only your injected html would be wrapped but you'd need a css file that reset all attributes for all tags to their default before you add your own styles. 在这种情况下，只有您注入的html会被包装，但您需要一个css文件，在添加自己的样式之前，将所有标记的所有属性重置为默认值。 No real issues here, just not very elegant... 这里没有真正的问题，只是不太优雅......
Another way would be to use an element that doesn't inherit stylesheet like an iframe, but that comes with its own issues... 另一种方法是使用一个不像iframe那样继承样式表的元素，但它带有自己的问题......
解决方案3
0 2010-08-22 09:54:12
i have seen on different plugins that they put the code inside a iframe and they use JS to interact with the rest of the page, so you can not change the css inside. 我已经在不同的插件上看到他们将代码放在iframe中，并且他们使用JS与页面的其余部分进行交互，因此您无法更改内部的CSS。
Also i have seen that when injecting html code,people sets the style of the plugin content using the "style" attribute inside the tags so the browser will give priority to the css inside the style attribute and not the css file. 我也注意到，在注入html代码时，人们使用标签内的“style”属性设置插件内容的样式，这样浏览器将优先考虑style属性中的css而不是css文件。 The idea is to override the css,usually with the "!important" clause. 想法是覆盖css，通常使用“！important”子句。 But you might have some problems on different browsers 但是您可能在不同的浏览器上遇到一些问题
EDIT i forgot to say that my answer is on the case that you inject the code on someone's else page where you cannot control directly the css 编辑我忘了说我的答案就是你把代码注入某人的其他页面而你无法直接控制css
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.