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

我想动态地将一些HTML注入另一个HTML页面，如下所示：

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

我如何避免我的注入型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不是我的选项。

试试看

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

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

我不确定它在这种情况下是否有效。

尝试使用CSS选择器，将您的

CSS

规则更新为如下：

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

---

不要试图阻止父页面设置CSS样式，您应该假设父页面可以设置的任何/所有CSS样式都将被设置。然后，采用使用更具体的选择器指定自己的样式的方法。特别是，您可以使用

！重要信息

指示器与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>

#jwplayer播放器{
边距：0！重要；
填充：0！重要；
边界：0！重要；
字体大小：100%！重要；
字体：继承！重要；
垂直对齐：基线！重要；
线高：1！重要；
}
... 

---

请注意，我从Eric Meyer的

中借用了一组合理的默认值，我认为您可以使用ShadowDOM来实现您想要做的事情

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

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

var shadow=document.querySelector（'#container'）.attachShadow（{mode:'open'}）；
shadow.innerHTML+='我是注入代码中的文本
'

例如：

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

免责声明：虽然这可能适用于您，但我不确定这是否是正确的方法，或者这是否有点“黑客”—我希望其他人会用他们的想法来评论这个答案

---

另外，我不确定浏览器支持是否适合您，您可以在此处查看：

什么是父HTML页面？我认为您不能：（您可以使用良好的旧

！inductant

CSS指示符指定确实需要以某种方式设置的样式。@dana还有其他可能的方式，请查看下面的答案作为示例。父页面每次都可能不同。对于此栏，在iframe prob中包装AFAIK是唯一的解决方案，它将更多的目标样式应用于e。）标记中的选择器或属性-CSS中的C代表层叠。Web组件也朝着您想要的方向迈出了一步，但我相信浏览器支持仍然相当普通。问题是页面可能不同，我根本无法编辑父页面。@BilalHalayqa将此规则附加到您正在处理的同一页面，然后它应该覆盖父页面中的默认值我的意思是，这是针对特定的父页面，我如何知道其他页面的规则将此CSS添加到页面您将添加

…

标记，即：）这不是关于添加CSS，我不希望我的div受到父页面的影响，我希望它被执行。问题是页面可能不同，我根本无法编辑父页面。也许可以尝试以下方法：

这是针对特定的父页面，我如何知道其他页面的规则，我希望我的代码从父页面CSS执行。

！！！注意：ple请记住，目前这只适用于最新的chrome和safari。其他浏览器暂时不支持它。但这是一个非常棒的解决方案。如果其他浏览器能跟上，嗯；）。我想知道是否有任何多边形填充足以解决这个问题，但我认为它们往往具有有限的CSS封装。我可能会在有时间的时候尝试一下。但是我正在注入的播放器有CSS规则，我的意思是重置会覆盖我注入的CSS。请注意，我不知道父css，每次都可能不同。然后您可以使用特定的css规则修改提供的css片段。例如，如果您可以指定
margin:10px！重要的或更改字体。这里的关键是在定义CSS规则时过于具体。我不认为指定CSS规则可以解决问题，唯一的解决方案是隔离注入的div不受父级CSS的影响，iFrame对我来说不是一个选项。
var shadow = document.querySelector('#container').attachShadow({mode: 'open'});
shadow.innerHTML += '<p>I am text in the injected code</p>'