How to apply css to an iframe

Question

I have an iframe which i want to appy a css file to it. I have tried some examples of the internet but haven't been successful.

Below is my code

<?php 
    include( 'site/simple_html_dom.php'); 
    $html = file_get_html('http://roosterteeth.com/home.php');
    foreach ($html->find('div.streamIndividual') as $div) 
    {
        file_put_contents('site/test.htm', $div, FILE_APPEND | LOCK_EX);
    }                   
    ?>
    </head>
    <body>
        <iframe src="site/test.htm" style="width:480px; height:800px;" 
            scrolling=true></iframe>
    </body>

Below is the jquery script I have tried

$('document').ready(function() {
    var cssLink = document.createElement("site/test.htm") 
    cssLink.href = "style.css"; 
    cssLink .rel = "stylesheet"; 
    cssLink .type = "text/css"; 
    frames['frame1'].document.body.appendChild("site/stylesheet.css");
});

Im not sure if the jquery code is wrong. All of the files are in the same domain. I hope you can help and thank you for your time.

I have a hunch there's some syntax error. Check the console (F12). — Joseph, Dec 26 '13 at 18:10
To my understanding, css needs to be on the page on initial load in order to do any good. By the time you can bring jquery to bear, it's already too late. By the time you're running the `$('document').ready()` function, it's *much* too late. — Ben Barden, Dec 26 '13 at 18:11
Possible duplicate of this duplicate: http://stackoverflow.com/questions/6960406/add-css-to-iframe — Cilan, Dec 26 '13 at 18:12
also of http://stackoverflow.com/questions/217776/how-to-apply-css-to-iframe — Ben Barden, Dec 26 '13 at 18:12
@JosephtheDreamer Thank you for your reply. The sytax error I get is for `frames['frame1'].document.body.appendChild("site/stylesheet.css");` and I get `Uncaught InvalidCharacterError: The string contains invalid characters.` — Aston, Dec 26 '13 at 19:18
@Sabre You need to append *the element you created*, which would be `cssLink`. — Joseph, Dec 26 '13 at 20:01

score 2 · Answer 1 · answered Dec 26 '13 at 18:28

It may help you.Try this .This is an example of iframe with css rule is applied!

<!DOCTYPE html>
<html>
 <head>
       <style>
          iframe {

              width:500px;
              height:200px;
              border:3px solid #cf5c3f;
              border-radius:10px;
          }
       </style>
    </head>
<body>

<iframe src="http://www.w3schools.com">
  <p>Your browser does not support iframes.</p>
</iframe>

</body>
</html>

enter image description here

devdot · Accepted Answer · 2013-12-26T18:20:34.583

Your js-code is not to bad, but there are some syntax-errors (press F12 to enter the console and to view the errorconsole). More important is, that you want your element to be a link element and you want to append it to the head of your iframe:

$('document').ready(function() {
  var cssLink = document.createElement("style"); 
  cssLink.href = "style.css"; 
  cssLink.rel = "stylesheet"; 
  cssLink.type = "text/css"; 
  frames[0].document.head.appendChild(cssLink);
});

PCMShaper · Answer 3 · 2016-06-01T10:07:22.947

You may try below code for apply css to an iframe...

1. First create 'index.html' file and add below code in it

<!DOCTYPE html>
<html>
    <head>
        <script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>
        <script>
        $(document).ready(function() {
            $('#iframe').load(function() {
                $("#iframe").contents().find("head").append("<style>.text_color{color:red;}@page{margin:0;}</style>");  
            });
        });
        </script>
    </head>
    <body>
        <iframe src="iframe.html" id="iframe" name="iframe"></iframe>
    </body>
</html>

2. Next create another file called 'iframe.html' and add below code to it

<!DOCTYPE html>
<html>
    <body>
        <div id="text"><span class="text_color">Content inside iframe goes here<span></div>
    </body>
</html>

3. Next run 'index.html' file and now see 'Content inside iframe goes here' text color will changed to red color

How to apply css to an iframe

3 Answers3