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)

not unless you have your own stylesheet on the page within the iframe - if you have this you can pass through a variable on the get string that you can use to add a class to the body tag within the iframe and then add extra styles per that class — Pete, Nov 08 '13 at 11:40
You can try the [`seamless`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#attr-seamless) attribute which is [not very well supported](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/iframe#Browser_compatibility). — Passerby, Nov 08 '13 at 11:59
re `seamless`, many years later: > "The attribute has been removed from both the WHATWG and the W3C HTML5 specifications." [caniuse](https://caniuse.com/#search=seamless) — ptim, Nov 04 '19 at 07:58

score 18 · Answer 1 · answered Nov 08 '13 at 14:05

18

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">')
            );
        });
    });

answered Nov 08 '13 at 14:05

himaja

216
1
4

1

Thank you for you answer, but i did't really want to use JQuery. – Ishan Jain Nov 14 '13 at 04:28
@IshanJain Unfortunately its this or nothing. – Ziad Aug 26 '14 at 20:31
1

Using jQuery is the better approach as you'll want your code to work across all browsers. The jQuery Foundation does an excellent job of handling all the nastiness between browsers for you. I've personally met many of them and they are always improving their code solutions as fully open source. – justdan23 Jul 01 '15 at 16:14
3

@justdan23 That used to be true, but nowadays, it's more of a convenience than anything. Browsers are consistent enough now that the DOM is actually workable. – Claudia Jun 24 '16 at 08:45
2

What about if you're opening the iframe in a modal? (I'm using https://github.com/noelboss/featherlight) The jQuery solution isn't working for me. – user163831 Oct 15 '17 at 15:55

score 7 · Answer 2 · answered Sep 05 '14 at 23:34

If all your CSS is in external files something like this might work in your iframe.

<script>
window.onload = function() {
    Array.prototype.forEach.call(window.parent.document.querySelectorAll("link[rel=stylesheet]"), function(link) {
        var newLink = document.createElement("link");
        newLink.rel  = link.rel;
        newLink.href = link.href;
        document.head.appendChild(newLink);
    });
};
</script>

It basically asks the parent for all the stylesheets then adds links to the iframe with the same references. If the iframe and the parent page are not at the same location on your server you'd have to manipulate the href appropriately.

Also the code above probably only works on newer browsers.

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

2 Answers2

Linked