防止注入的标记受到父CSS的影响

Question

I want to inject some HTML to another HTML page dynamically like this :

<div id="jwplayer-player"> ... </div>

In the parent HTML page, there is CSS rules for DIV as generic (This is sample , may be different according to the page) :

div {
    margin-top: 15px;
    line-height: 200%;
    white-space: normal;
}

How do I execlude my injected DIVs from being affected by them.

The player is injected as follows :

<div id ="vid-player-container" class="player-container"></div> 
<script type="text/javascript"> 
document.write('<script type="text/javascript" src="some.site.com/jwplayer/jwplayer.js" ></script>'); 
document.write('<script type="text/javascript" src="some.script.com/player_style1.js"></script>'); 
</script> 

If I try it alone outside those parent pages, works perfectly. So the key is isolating the injected code from being affected by the parent site, note that iFrame is not an option for me.

Answer 1

Rather than trying to prevent the parent page from setting CSS styles, you should assume that any/all CSS styles that can be set by the parent page will be set. Then, take the approach of specifying your own styles with a more specific selector. In particular, you can use the !important indicator in combination with and id selector to have a reasonably good chance of having your style definitions win out. For example:

<style type="text/css">
#jwplayer-player {
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    font-size: 100% !important;
    font: inherit !important;
    vertical-align: baseline !important;
    line-height: 1 !important;
}
</style>
<div id="jwplayer-player"> ... </div>

Note that I borrowed a good set of reasonable defaults from Eric Meyer's Reset CSS

Answer 2

I think you could use the ShadowDOM to achieve what you are trying to do. https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

It is designed to allow you to separate your components in this way, and provides isolation of CSS and JavaScript for the encapsulated DOM.

var shadow = document.querySelector('#container').attachShadow({mode: 'open'});
shadow.innerHTML += '<p>I am text in the injected code</p>'

For example: https://jsfiddle.net/rn46rfgx/

If you inspect element on your page, you should be able to see the isolation:

Disclaimer : Whilst this probably works for you, I'm not sure if it is the correct way to do this or if it's a bit of a "hack" - I hope others will comment on this answer with their thoughts on this!

Also, I'm not sure if the browser support will be adequate for you, you can check here: http://caniuse.com/#feat=shadowdom

Answer 3

Try

#jwplayer-player {
    margin-top: initial;
    line-height: initial;
    white-space: initial;
}

It will change all those rules to its initial values - default.

I am not sure if it will work in this case.

Answer 4

Try using the not CSS selector, update your CSS rule to become like this:

.MainContentdiv .BodyDiv :not(#jwplayer-player) div {
    margin-top: 15px;
    line-height: 200%;
    white-space: normal;
}