How do I prevent CSS interference in an injected piece of HTML?

前端未结

关注

 3  1740

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 ma

相关标签:

3条回答

轻奢々

2021-01-05 23:17
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. 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.

Issues:
1. Only possible if you are injecting other site content onto your own site.
2. This could get complicated depending on where you are injecting html.
The other option is to load a resetting stylesheet that targets your injected html specifically. 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. 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...
0 讨论(0)
发布评论:

提交评论
- 加载中...
情深已故

2021-01-05 23:21

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.

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. The idea is to override the css,usually with the "!important" clause. 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

0 讨论(0)
发布评论:

提交评论
- 加载中...
日久生厌

2021-01-05 23:31
You can't prevent that from happen. However, you can override the CSS rules. 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.

Your plugin:
```
<div id="yourapplicationname_mainelement_name">
  <p>My paragraph that must not be styled</p>
</div>
```
Your 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.

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. You'll have a hard time without it when developing your application.
0 讨论(0)
发布评论:

提交评论
- 加载中...