Question

I'm developing a widget to show content from my site on other sites and I'm trying to figure out how to isolate the div in which the widget lives from any css from the host page. I've include a jQuery plugin to scope the style to the div, and I'm also trying to use the css all: initial and all: unset.

I'm running into some problems though. When I apply the aforementioned css properties to the div, everything within is rendered as a string of text (including my javascripts).

I've also attempted placing the widget div inside another div and resetting the css of that div, but it has no effect.

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

My case is a bit more complex than this case because of some constraints I must operate within. My widget depends on bootstrap css, so applying !important to everything is not a feasible option. It also needs to be responsive, so using an iframe is not an option. Lastly, it has to be plug-and-play ready. A user needs to simply drop in the code and have it render. In most cases, I will have no control over anything else on the host page.

Answer 1

Try scoping your 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>

Also see--> http://w3c.github.io/html-reference/style.html And also-->http://www.w3.org/html/wg/drafts/html/master/semantics.html#attr-style-scoped

Answer 2

我找到了一个似乎在生产环境中持有的解决方案，其中小部件嵌入在主页上。

然后我使用cleanslate.css来“清理”我的小部件容器。这是在进行AJAX调用之前完成的。

然后我使用PM5544/scoped-polyfill插件将我的样式块作用于容器。

方便的是，我能够在从服务器获取的窗口小部件代码中调用此代码，而不是在客户端放入代码的AJAX调用之后，这意味着客户端处理的代码更少。

我最初尝试使用此jQuery-Scoped-CSS Plugin来确定我的div，但它不能很好地运行。一些范围样式泄漏并影响主页。我提交了一份问题报告，但看起来作者已经放弃了这个项目。

以下是客户端收到的工作代码：

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
    $(document).ready(function(){
        var company = 'taco-corp';
        $.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 class="cleanslate">
    <div id="company-widget" style="max-width: 900px;background:white;"></div>
</div>

这是小部件代码中的作用域样式块。请注意，cleanslate.css必须是第一个加载的样式表，并且必须在作用域样式块之后调用scoped-polyfill插件。

<script type="application/javascript">
    // Analytics and other scripts go here
</script>

<style scoped>
    // Load cleanslate.css before any other style sheets
    // Load widget stylesheets
</style>

<script type="application/javascript">
    // Load PM5544/scoped-polyfill plugin 
</script>

Isolate div from host page's css

2 个答案:

Isolate div from host page&#39;s css

2 个答案:

Isolate div from host page's css