Question

我正在编写一个GreaseMonkey脚本，有时会创建一个模态对话框 - 类似于

<div id="dialog">
   Foo
</div>

。但是，如果网站有类似

的内容，我该怎么办？

#dialog {
    display: none !important;
}

？或者某些网站的所有者可能是偏执狂，并且有类似

的内容

div {
    display: none !important;
}
div.trusted {
    display: block !important;
}

因为他不希望像我这样的人在他的网页上添加不受信任的内容。如何防止这些样式隐藏我的对话框？

我的脚本在所有页面上运行，因此我无法使我的代码适应每个案例。

有没有办法沙箱我的对话框？

Answer 1

实际上是一个非常令人兴奋的问题，这是另一种方法：

添加iframe并修改它会为您（您的沙箱）创建一个单独的css空间

看看这个jsfiddle示例：http://jsfiddle.net/ZpC3R/2/

var ele = document.createElement("iframe");
ele.id = "dialog";
ele.src = 'javascript:false;';
ele.style.height = "100px";
ele.style.width = "300px";
ele.style.setProperty("display", "block", "important");
document.getElementById("dialog").onload = function() {
    var d = document.getElementById("dialog").contentWindow.document;
    // ... do your stuff within the iframe
};

这似乎在firefox中没有问题。

现在你只需要确保iframe不受影响，你可以按照我在1.答案中描述的方式做到这一点

Answer 2

只需创建这样的div：

var ele = document.createElement("div");
ele.style.setProperty("display", "block", "important");

应该覆盖所有其他样式。

看这里，似乎有效：http://jsfiddle.net/ZpC3R/

如何防止CSS影响某些元素？

2 个答案: