css - 从主机页面的 css 中分离 div

Question

我正在开发一个小部件以在其他站点上显示我站点的内容，并且我正在尝试弄清楚如何将小部件所在的 div 与主机页面的任何 css 隔离开来。我已经包括一个 jQuery 插件来将样式范围限定到 div，并且我还尝试使用 css all: initial 和 all: unset。

不过我遇到了一些问题。当我将上述 css 属性应用于 div 时，其中的所有内容都呈现为一串文本(包括我的 javascript)。

我还尝试将小部件 div 放入另一个 div 并重置该 div 的 css，但它没有效果。

<style>
    #company-widget {
        all: initial;
    }
    #company-widget * {
        all: unset;
    }
</style>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    // jQuery Scoped CSS plugin here

    $(document).ready(function(){
        var company = 'taco-corp';
        $.scoped();
        $.ajax({
            type: 'GET',
            url: 'http://localhost:3000/' + company + '/widget.js?callback=?',
            contentType: "application/javascript",
            crossDomain: true,
            dataType: 'JSONP',
            success: function(data) {
                $('#company-widget').html(data.html);
            },
            error: function(e) {
                console.log(e.message);
            }
        });
    });
</script>
<div id="company-widget" style="max-width: 900px;"></div>

我的情况比 this case 复杂一点由于某些限制，我必须在其中操作。我的小部件依赖于 bootstrap css，因此将 !important 应用于所有内容并不是一个可行的选择。它还需要响应，因此不能使用 iframe。最后，它必须是即插即用的。用户需要简单地放入代码并让它呈现。在大多数情况下，我无法控制主页上的任何其他内容。

Answer 1

尝试确定您的 CSS 范围。

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    // jQuery Scoped CSS plugin here

    $(document).ready(function(){
        var company = 'taco-corp';
        $.scoped();
        $.ajax({
            type: 'GET',
            url: 'http://localhost:3000/' + company + '/widget.js?callback=?',
            contentType: "application/javascript",
            crossDomain: true,
            dataType: 'JSONP',
            success: function(data) {
                $('#company-widget').html(data.html);
            },
            error: function(e) {
                console.log(e.message);
            }
        });
    });
</script>
<div id="company-widget" style="max-width: 900px;">
<style scoped>
    // Add style here. It will only be applied to the parent div
</style>
</div>

另见--> http://w3c.github.io/html-reference/style.html还有 --> http://www.w3.org/html/wg/drafts/html/master/semantics.html#attr-style-scoped