Adding CSS to an iframe element

Question

How do I target and item in an iframe thats on my site and change the inline value?

<iframe class="preview_iframe">
<div id="example">
<a id="ex">
<svg fill="#000000"></svg>
</a>
</div>
</iframe>

I need to target an SVG (multiple) in an iframe and change the fill (color) with jquery, how can I do this I tried these they don't seem to work

Heres the jquery im trying

$("[id^=like_iframe_]").load(function() {
  var frame = $("[id^=like_iframe_]").contents();
  $("svg", frame).css({'fill' : 'red'});
});

And

$("[id^=like_iframe_]").contents().find("svg").css({'fill' : 'red'});

Its selecting the frame, but it's not changing the color of the svg

Heres a link http://absdfsderedfdsfrr.tumblr.com/ to see what im working on

can you log the number of svg found? `console.log(frame.find("svg").size());` — what is sleep, Nov 07 '13 at 22:10
I'm assuming that you are not making any cross-domain requests for the iframe's content? Modern browsers will not allow you to manipulate cross-domain content within an iframe (this would be cross-site scripting, which is a security vulnerability). See: http://stackoverflow.com/questions/364952/jquery-javascript-accessing-contents-of-an-iframe — Michael Zalla, Nov 07 '13 at 22:15
I just realize that was happening, is there anyway I can manipulate the color of that item? — user2726228, Nov 07 '13 at 22:17
No. Modern browsers will not allow you to access or manipulate these elements for security reasons. For ways around the same-origin policy, see this question: http://stackoverflow.com/questions/3076414/ways-to-circumvent-the-same-origin-policy?lq=1 — Michael Zalla, Nov 07 '13 at 22:19
Also, please do not make duplicate question listings: http://stackoverflow.com/questions/19846765/how-to-target-an-item-in-an-iframe-with-jquery ಠ_ಠ — Michael Zalla, Nov 07 '13 at 22:31

score 0 · Answer 1 · answered Nov 07 '13 at 22:13

0

try this sry have not sandbox to check;

$('.preview_iframe').get(0).find("svg").css({'fill' : 'red'});

answered Nov 07 '13 at 22:13

Dreamm

141
8

score 0 · Answer 2 · answered Nov 07 '13 at 22:19

0

You could set a class and use .attr() to change the fill like

$('.class').attr('fill', 'color');

answered Nov 07 '13 at 22:19

Jimmy

78
1
11

score 0 · Answer 3 · answered Nov 07 '13 at 22:28

0

<svg fill="#000000"></svg>

"fill" isn't a CSS style, that's an attribute on svg.

It should actually look something like this:

$("[id^=like_iframe_]").contents().find("svg").attr('fill', '#FF0000');

As explained on jQuery's documentation (http://api.jquery.com/attr/), .attr can get or set an attribute on a tag. The above code should be roughly what you're looking for.

EDIT: Jimmy makes a good point, you should probably add a class to the iframe as well.

answered Nov 07 '13 at 22:28

JaidynReiman

954
3
11
22

"fill" **is** a valid CSS property, but it only applies to SVGs. It is valid to include it in style sheets. – Paul LeBeau Nov 07 '13 at 22:52
I actually was going to include a comment about how I wasn't sure if it was possible to update SVG's using CSS or not, I was mainly referring to the fact that, in context, fill here was being used as an attribute and it'd probably be best to change the fill value using attr. – JaidynReiman Nov 07 '13 at 23:11

Adding CSS to an iframe element

3 Answers3