如何在網頁上沙箱特定元素？

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文件添加了一個“命名空間”。