jQuery append css link to iframe head

Question

I'm trying to append a css file to an iframe that is created on a page from a global script. I can access part of it, but for some reason I can't append to the head. It's not throwing errors either, which is frustrating.

<script type="text/javascript">
$(document).ready(function() {                   
  $('#outline_text_ifr')
    .contents()
    .find('head')
    .append('<link type="text/css" rel="stylesheet" href="/include/outline.css" media="all" />');
});
</script>

possible duplicate of [Append a stylesheet to an iframe with jQuery](http://stackoverflow.com/questions/624979/append-a-stylesheet-to-an-iframe-with-jquery) — hunter, Jan 03 '11 at 19:22
I have tried the append a stylesheet and it throws an error. Perhaps I'm implementing it incorrectly. But it says the frame doesn't exist on the page. — Micharch54, Jan 03 '11 at 19:29
I'm wondering if the issue is that the iframe is being created from an external script (one I don't have access to). That would explain the error I get when trying to implement the method in the other post. — Micharch54, Jan 03 '11 at 19:32
What ever solution you take, you'll need to wait for the load-event of the iframe instead of the ready-event of the parent document. — Dr.Molle, Jan 03 '11 at 19:39

score 14 · Accepted Answer · answered Nov 21 '12 at 16:22

14

var $head = $("#IFrame").contents().find("head"); 
var url = "Styles/styles.css";
$head.append($("<link/>", { rel: "stylesheet", href: url, type: "text/css" } ));

or

        $('#IFrame').contents().find('#div1').css({
            color: 'purple'
        });

answered Nov 21 '12 at 16:22

Rami Sarieddine

5,396
35
41

1

Perfect!! Works for me once i used it :-) – jeeva Nov 18 '14 at 13:46
How can we implement in typescript this? – SMash May 11 '20 at 06:02

jQuery append css link to iframe head

1 Answers1