Jquery problems with adding css to iframe content

Question

I have found multiple posts on how to add css to iframe content and this is my code:

$(function() {
    $('iframe').addClass('bro'); //does work
    $('iframe').contents().find('html').addClass('broz'); //doesn't work
    $('iframe').contents().find('.side-section').addClass('brozzz'); //doesn't work
});

The first one works, as expected, but then all the other identifiers don't work. I am just trying to test out why they aren't working, this isn't the actual work I'm doing.

This is the iframe code:

<iframe src="http://www.dropcards.com/download/profilewidget/?ArtistID=17121" width="400" height="230" scrolling="no" frameborder="0" allowtransparency="true" ></iframe>

using latest jquery if that matters – chasethesunnn Jul 14 '12 at 22:03 — chasethesunnn, Jul 14 '12 at 22:03

score 4 · Accepted Answer · edited May 23 '17 at 10:34

4

You cannot modify the dom of the page in an iframe, if the page is not from the same domain as the domain containing the iframe. The idea is to to prevent XSS, cross-side-scripting.

You can find more info heresame origin policy

In the first case, you are modifying your page's dom, in the next 2 cases, this is not possible since, you do not have access to the dom of the page contained in the iframe

edited May 23 '17 at 10:34

Community

1
1

answered Jul 14 '12 at 22:07

sanz

1,069
1
10
26

ok thanks for the info! It is interesting that all the questions about how to do this never mention if it is from the same domain or not, but I do see why this feature is there: http://stackoverflow.com/questions/3714880/how-to-apply-css-to-iframe-content – chasethesunnn Jul 14 '12 at 22:12

score 1 · Answer 2 · answered Jul 14 '12 at 22:08

1

if the the contents of the iframe are from another domain you are not allowed to manipulate them.

answered Jul 14 '12 at 22:08

Ram

143,282
16
168
197

Jquery problems with adding css to iframe content

2 Answers2