如何在网页上沙箱特定元素？

Question

我在我的网页上有这个东西...我想它可以被称为小部件......

如何将CSS和JS从包含页面的CSS和JS中分离出来？ 最好不使用iframe？

在我的应用程序中，用户可以自定义内容的CSS，因此，我需要一个干净的平板。

Answer 1

在窗口小部件的最外层元素上，设置一个相对唯一的类名。 例如：

<div class="my_spiffy_widget">
  <!-- Insert spiffy widget here -->
</div>

将Javascript和CSS放在他们自己的文件中。 对于CSS，构建所有选择器，如下所示：

.my_spiffy_widget P { /* paragraph rules */ }
.my_spiffy_widget A { /* anchor rules */ }
.my_spiffy_widget UL { /* unordered list rules */ }

这可以确保您的规则不会被其他CSS规则意外地覆盖。

与JavaScript类似，在函数前面加上一个通用的独特前缀：

function my_spiffy_widget_doSomething() {...}

尽可能避免使用全局变量，但如果不能，请将它们作为前缀：

var my_spiffy_widget_firstTime = true;

Answer 2

您可以在属性中添加！important声明，使用户更难以覆盖设置。

例如：

div.widget #header {
    padding-left: 10px !important;
    padding-right: 5px !important;
}

和/或您可以获取CSS重置脚本（例如Eric Meyer的）并在每个选择器前面加上容器DIV的名称。

Answer 3

您可以在非常复杂的css类名称之外提供所有元素，并确保它们不会与用户将选择的元素发生冲突（例如“KAFHxyz _...”）。 这样，所有理智的类名和默认样式将仅适用于“小部件”。

这将是一些努力，因为您需要使用!important设置所有标准CSS样式（因此用户可以说“body {font ...}”并且它仅适用于他的区域。

或者，您可以尝试编写一些获取所有元素的所有样式的javascript，然后添加“widget”（它的JS / CSS），然后将所有样式重置为之前的样式。 应该是可能的，但性能可能很糟糕。

[编辑]那就是说，你知道你可以用JavaScript创建一个iframe并操纵你内心的内容（里面的DOM），是吗？ 在这种情况下，IFrame将只是一个类似Div的元素，它为CSS和JS文件添加了一个“命名空间”。