How to apply CSS to inner Iframe element through parent window CSS class?

Question

I have a parent(main) page that has some iframe sections. And I want to apply css style to inner iframe element.

When I googling for it, I found many post relate to this topic but they all suggest to use jquery/javascript to apply CSS to inner elements.

Is it possible to apply css style to inner iframe element through parent window(main page) CSS class?

(All the iframe's domain is the same as the parent)

Answer 1

You can not directly apply styles to the inner IFrame element through parent window CSS class even though its domain is same as parent.

As ,(All the iframe's domain is the same as the parent) ..

Best thing you can do is ,to add your main style sheet to the IFrame using javascript or jquery.

 $(document).ready(function(){
        $('#myIframe').load(function(){
            $('#myIframe')
                    .contents().find("body")
                    .html("test iframe");
            $('#myIframe')
                .contents().find("head")
                .append($('<link rel="stylesheet" type="text/css" href="style.css">')
            );
        });
    });