How to applying css style into an iframe content?

Question

I am trying to apply a CSS style for content inside the iframe, please check this link http://jsfiddle.net/pPqGe/

jQuery:

$(document).ready(function() {
    $('iframe').contents().find('h1').css('color','red');
});

HTML:

<iframe src="mysite" width="100%" height="100%" id="myframe"></iframe>

For iframe source I have used a live website.

shnisaka is right, it's just not possible otherwise. Browsers come with that restriction for security reasons, it's called "cross-domain scripting". — Cedric Reichenbach, Apr 04 '13 at 13:43
If you are calling in another web page that lives on your same domain, then simply use ajax to call that page content. — klewis, Apr 04 '13 at 14:03

score 7 · Answer 1 · answered Apr 04 '13 at 13:56

7

It works. Problem is there is no H1, only H2. Check out this link http://jsfiddle.net/pPqGe/1545/.

HTML:

<iframe src='jsfiddle.net'></iframe>

JavaScript:

$(document).ready(function() {
    $('iframe').contents().find('h2').css('color','red');
    $('iframe').contents().find('#header').css('opacity','.2');
});

answered Apr 04 '13 at 13:56

Christoffer Helgelin Hald

571
4
15

Yes you are right.It's working fine in jsfiddle, but i am using another source file for iframe. **For example:**" " it's not support. _.headline_ class is available on smashingmagazine but it would not affected. – Vineesh Surendran Apr 05 '13 at 06:33

How to applying css style into an iframe content?

1 Answers1

Linked