Apply css class in iframe to main document

Question

I'm trying to apply a CSS class that is defined in the head of an iframe to an element in the main document.

Is there an easy way - other than copying the class from the iframe's head to the main document's head with Javascript - to access that class and apply it to the main doc?

Something like this (which obviously doesn't work) in the main doc would be awesome:

<div class="#iframe.classtoapply">lorem ipsum</div>

Might be useful: http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe — Jason Evans, Aug 26 '12 at 20:31
Pretty sure there's no easy way to do this. Besides adding the iframe stylesheet to your main page — Farzher, Aug 26 '12 at 20:33
there is no such thing as a CSS class (although there are class selectors). Do you mean a CSS ruleset or an HTML class? — Quentin, Aug 26 '12 at 20:35
I mean a class selector such as `.classtoapply{color: green}` — Horen, Aug 26 '12 at 20:36

Ashirvad · Accepted Answer · 2012-08-26T21:31:53.027

hey you can do like this.. Suppose you have a iframe which looks something like this having class a and b. CODE

<head>

<style>
.a{color:red;}
.b{
color:blue;
}
</style>
</head>

Now Suppose you have a Main page something like this containing that iframe.You can write code like this.Checkout.

 <head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.0/jquery.min.js"></script>
</head>
<body>
<iframe src="youriframe.html"></iframe>
<span class="a" >Hi</span>
<span class="b" >It Worked</span>
<script>
$(function() {
    $('head').append('<style/>');
    setInterval(function() {
        if(typeof($('iframe').contents().find('head>style').html())!='undefined') {
            $('head>style').eq(0).append($('iframe').contents().find('head>style').html());
        }
    }
    ,1);
}
);
</script>
</body>

In the end I used a solution similar to @AshirvadSingh's approach. Seems like - even though it is not pretty - it is the best you can do. — Horen, Oct 06 '12 at 15:59

Apply css class in iframe to main document

1 Answers1