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

Question

我想像这样动态地将一些HTML注入另一个HTML页面：

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

在父HTML页面中，DIV的CSS规则为通用（这是示例，根据页面可能有所不同）：

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

如何排除我注射的DIV受其影响。

玩家注入如下：

<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> 

如果我在这些父页面外单独尝试，那么效果很好。 所以关键是隔离注入的代码不受父网站的影响，请注意iFrame不适合我。

Answer 1

您应该假设可以设置父页面可以设置的任何/所有CSS样式，而不是试图阻止父页面设置CSS样式。然后，采用使用更具体的选择器指定自己的样式的方法。特别是，您可以将!important指示符与id选择器结合使用，以便有更好的机会定义获胜。例如：

<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>

请注意，我从Eric Meyer的Reset CSS

中借用了一套合理的默认值

Answer 2

我认为你可以使用ShadowDOM来实现你想要做的事情。 https://developer.mozilla.org/en-US/docs/Web/Web_Components/Shadow_DOM

它旨在允许您以这种方式分离组件，并为封装的DOM提供CSS和JavaScript的隔离。

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

例如：https://jsfiddle.net/rn46rfgx/

如果检查页面上的元素，您应该能够看到隔离：

免责声明：虽然这可能适合您，但我不确定这是否是正确方式，或者它是否有点像“黑客” - 我希望其他人会对这个问题的评论发表评论！

此外，我不确定浏览器支持是否适合您，您可以在此处查看：http://caniuse.com/#feat=shadowdom

Answer 3

尝试

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

它会将所有规则更改为其初始值 - 默认值。

我不确定它是否适用于这种情况。

Answer 4

尝试使用not CSS选择器，将CSS规则更新为：

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