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>
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