Change body background color in an iframe using on

2019-01-25 19:31发布

站内问答 / HTML/CSS
629 6 2

Using a iframe where I call a site from my webspace, Using one css file with body {background-color: #222}.

The iframe src also use this CSS file. The Problem is that the body in the iframe need another background-colour.

tried

iframe>body { background-color: #other }

Any idea or suggestions?

标签： html css iframe
举报
6条回答
甜甜的少女心
2楼-- · 2019-01-25 20:04

ive used this and it works for me. (and its sooooo easy!)

in your CSS file put:

iframe { background-color:orange; }

Just change the "orange" to whatever color you need. Thats it!

Enjoy!

查看更多
0人赞 添加讨论(0) 举报
你好瞎i
3楼-- · 2019-01-25 20:06

Remember that a Javascript can modify only properties of iframe with the same origin of the site, otherwise you'll get a Security Error.

Protocols, domains and ports must match.

查看更多
0人赞 添加讨论(0) 举报
在下西门庆
4楼-- · 2019-01-25 20:06

In the page that the iframe contains, link another stylesheet and then change all the CSS styles that you wish to.

查看更多
0人赞 添加讨论(0) 举报
聊天终结者
5楼-- · 2019-01-25 20:13

using Javascript We can add Background Color to Iframe 

 var x = document.getElementById("myframe");
    var y = (x.contentWindow || x.contentDocument);
    if (y.document)y = y.document;
    y.body.style.backgroundColor = "red";

Reference w3schools

查看更多
0人赞 添加讨论(0) 举报
女痞
6楼-- · 2019-01-25 20:15

This question is similar to How to apply css to iframe content?. Basically you can use jQuery to change the CSS properties in the iframe

$('#yourIframe').contents().find('body').css({
    background-color: '#333333'
});

Edit: You may need to add that when the iframe loads:

$('#yourIframe').load(function(){ 
    $(this).contents().find('body').css({
        background-color: '#333333'
    });
});
查看更多
0人赞 添加讨论(0) 举报
闹够了就滚
7楼-- · 2019-01-25 20:20

I assume the iframe takes up a smaller portion of your site. In that case I would advice you to simply use a div with the same size of the iframe is loaded, and giving this div the proper background-color.

OR: include a style property in the source of the iframe page:

<head>
    <style>body {background-color:#COLOR}</style>
</head>
查看更多
0人赞 添加讨论(0) 举报
登录 后发表回答
相关问题
查看全部
相关文章
查看全部
收藏的人(2)