CODEWITHSUNDEEP
javascriptjqueryhtmlcssiframe
Aston
Aston

Reputation: 199

How to apply css to an iframe

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.

Upvotes: 0

Views: 1684

Answers (3)

PCMShaper
PCMShaper

Reputation: 64

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

Upvotes: 0

Asraful Haque
Asraful Haque

Reputation: 1125

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

Upvotes: 2

devdot
devdot

Reputation: 178

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

Upvotes: 1

Related Questions