jd6*_*699 148 css iframe styles overriding
如何控制一个体内元素的背景图像和颜色iframe？注意,嵌入的body元素有一个类,而且iframe是一个页面,它是我站点的一部分.
我需要这个的原因是我的网站有一个黑色背景分配给身体,然后白色背景分配给包含文本的div.WYSIWYG编辑器iframe在编辑时使用嵌入内容,但它不包含div,因此文本很难阅读.
iframe编辑器中的when 的主体有一个在其他任何地方都没有使用的类,所以我假设这个被放在那里,所以这样的问题可以解决.但是,当我应用样式时,class.body它们不会覆盖应用于body的样式.奇怪的是,样式确实出现在Firebug中,所以我不知道发生了什么!
谢谢
更新 - 我已经尝试了@ mikeq的解决方案,即将类型添加到正文类的类中.这在添加到主页的样式表时不起作用,但在使用Firebug添加时它确实有效.我假设这是因为Firebug应用于页面上的所有元素,而CSS不应用于iframe中.这是否意味着在使用JavaScript加载窗口后添加css会起作用？
Sim*_*am5 244
以下仅适用于iframe内容来自同一父域的情况.
以下jquery脚本适合我.在Chrome和IE8上测试过.内部iframe引用与父页面位于同一域中的页面.
在这种特殊情况下,我在内部iframe中隐藏了一个具有特定类的元素.
基本上,您只需将"style"元素附加到内部iframe的"head".
$('iframe').load( function() {
$('iframe').contents().find("head")
.append($("<style type='text/css'> .my-class{display:none;} </style>"));
});
DA.*_*DA. 101
iframe是页面中的"洞",显示其中的另一个网页.iframe的内容不是任何形状或父页面的一部分.
正如其他人所说,您的选择是:
Myl*_*ray 25
您无法更改iframe中显示的页面样式,除非您具有直接访问权限,因此您拥有源html和/或css文件的所有权.
这是为了阻止XSS(跨站点脚本)
一个iframe有另一个范围,所以你不能访问的样式或改变其使用JavaScript的内容.
它基本上是"另一页".
你唯一能做的就是编辑自己的CSS,因为使用全局CSS你无法做任何事情.
iframe CSS通过使用SimpleSam5的部分答案,我通过一些Tawk的聊天iframe实现了这一点(他们的定制界面很好,但我需要进一步的自定义).
在显示在移动设备上的这个特定iframe中,我需要隐藏默认图标并放置我的一个背景图像.我做了以下事情:
Tawk_API.onLoad = function() {
// without a specific API, you may try a similar load function
// perhaps with a setTimeout to ensure the iframe's content is fully loaded
$('#mtawkchat-minified-iframe-element').
contents().find("head").append(
$("<style type='text/css'>"+
"#tawkchat-status-text-container {"+
"background: url(https://example.net/img/my_mobile_bg.png) no-repeat center center blue;"+
"background-size: 100%;"+
"} "+
"#tawkchat-status-icon {display:none} </style>")
);
};
我没有任何Tawk的域名,这对我有用,因此你可以这样做,即使它不是来自同一个父域名(尽管Jeremy Becker对Sam的答案的评论).
此代码使用原始JavaScript。它创建一个新<style>元素。它将该元素的文本内容设置为包含新CSS的字符串。并将该元素直接附加到iframe文档的头部。
var iframe = document.getElementById('the-iframe');
var style = document.createElement('style');
style.textContent =
'body {' +
' background-color: some-color;' +
' background-image: some-image;' +
'}'
;
iframe.contentDocument.head.appendChild(style);