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.
3 answers
solution1
2 2013-12-26 18:28:10
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>
solution2
1 ACCPTED 2013-12-26 18:15:32
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);
});
solution3
0 2016-06-01 09:46:30
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
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.