简体繁体 English

在iframe的内部和外部应用CSS样式表

[英]CSS stylesheet applied inside and outside of iframe

原文 2014-03-25 21:25:20 0 1 html/ css/ iframe

I am working on a kind of funky 3rd party website where I have access to the CSS files but cannot modify the actual html or JavaScript files. 我正在一个时髦的第三方网站上工作，在该网站上我可以访问CSS文件，但是无法修改实际的html或JavaScript文件。 I changed the background on the site but I found later the css also applied to web parts inside of iframes. 我更改了网站的背景，但后来发现css也适用于iframe内的Web部件。 The same css file is linked inside of these iframes so the background tags I am applying to the outer html body {} are also applied to the inner set. 在这些iframe中链接了相同的css文件，因此我将应用于外部html body {}的背景标记也应用于内部set。

Is there any way to add another selector that only applies if it is inside of an iframe or is there no way for it to figure that out? 有没有办法添加仅在iframe内适用的另一个选择器，或者没有办法找出该选择器？ I have tried iframe html body {} and #name-of-iframe body {} but these don't even show as being associated with the inner body in the browser. 我已经尝试过iframe html主体{}和＃name-of-iframe主体{}，但是这些甚至都没有显示为与浏览器中的内部主体相关联。 Is this something that can be done? 这是可以做到的吗？ Any insight is appreciated. 任何见解均表示赞赏。

1 个解决方案

Unfortunately you would need to run Javascript to determine if you're running inside an iframe or not. 不幸的是，您需要运行Javascript来确定您是否在iframe中运行。 CSS by itself is not sufficient. CSS本身是不够的。

You might look for differences in the markup between the two pages-- for example, maybe the <body> element has a different ID or class on pages inside the iframe. 您可能会在两个页面的标记中寻找差异-例如，也许<body>元素在iframe中的页面上具有不同的ID或类。