javascript - 防止注入(inject)的标签受到父 CSS 的影响

Question

我想像这样动态地将一些 HTML 注入(inject)到另一个 HTML 页面:

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

在父 HTML 页面中，有通用的 DIV CSS 规则(这是示例，可能根据页面不同):

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

如何避免注入(inject)的 DIV 受到它们的影响。

播放器注入(inject)如下:

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

如果我在那些父页面之外单独尝试，效果很好。 所以关键是隔离注入(inject)的代码不受父站点的影响，注意 iFrame 不是我的选择。

Answer 1

我认为您可以使用 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/

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

免责声明:虽然这可能对您有用，但我不确定这是正确的方法还是有点“hack” - 我希望其他人能用他们对此的想法来评论这个答案!

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