如何防止CSS影响某些元素？ [英] How can I prevent CSS from affecting certain element?

问题描述

我写了一个GreaseMonkey脚本，有时会创建一个模态对话框，例如

  ; div id =dialog> 
 Foo 
< / div> 
  

。但是如果网站有类似

  #dialog {
 display ：none！important; 
} 
  

？或者某个网站的所有者是偏执的，并且有类似

  div {
显示：none！important; 
} 
 div.trusted {
 display：block！important; 
} 
  

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

我的脚本在所有页面上运行，因此我无法根据每个案例调整我的代码。

$

解决方案

是否有方法可以 >实际上是一个非常复杂的问题，这里是另一种方法：

添加一个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; 
 // ...在iframe中执行你的操作
}; 
  

这似乎在firefox中没有问题。

现在你只需要确保iframe是不变的，你可以这样做，我描述在我的1. answer

I am writing a GreaseMonkey script that sometimes creates a modal dialog – something like

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

. But what can I do if the site has something like

#dialog {
    display: none !important;
}

? Or maybe the owner of some site is paranoid and has something like

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

because he doesn't want people like me adding untrusted content to his page. How can I prevent those styles from hiding my dialog?

My script runs on all pages, so I can't adapt my code to each case.

Is there a way to sandbox my dialog?

解决方案

Actually a very interessting problem, here is another approach:

adding an iframe and modifying it creates a seperate css space for you (your sandbox)

look at this jsfiddle example: 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
};

this seems to work without problem in firefox.

now you only have to make sure that the iframe is untouched, you can do this they way i described in my 1. answer

这篇关于如何防止CSS影响某些元素？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！