How do I access the iframe and override the elements style "td.rank" ? This is what I've got so far:
<script>
var head = $("#iframe11").contents().find("head");
var css = '<style type="text/css">' +
'td.rank{background-color: #fc6b0a!important;}; ' +
'</style>';
$(head).append(css);
</script>
<iframe src="" id="iframe11" style="margin-left: 174px; width: 401px; border: 0px solid black; height: 358px; opacity: 0.85; margin-top: 23px;"></iframe>
When I open the code using "inspect element" - I don't even see the CSS code part in the <head> tag of the iframe.
How do I access the iframe and override the elements style "td.rank" ? This is what I've got so far:
<script>
var head = $("#iframe11").contents().find("head");
var css = '<style type="text/css">' +
'td.rank{background-color: #fc6b0a!important;}; ' +
'</style>';
$(head).append(css);
</script>
<iframe src="http://www.example." id="iframe11" style="margin-left: 174px; width: 401px; border: 0px solid black; height: 358px; opacity: 0.85; margin-top: 23px;"></iframe>
When I open the code using "inspect element" - I don't even see the CSS code part in the <head> tag of the iframe.
-
try this...
$("iframe").contents().find("td.rank").css("background-color", "#fc6b0a!important");– Ahs N Commented Aug 19, 2015 at 10:51 - 1 iframe document should also have to be on same domain and port. – Jai Commented Aug 19, 2015 at 10:54
- and if it's 2 different websites? @Jai – Imnotapotato Commented Aug 19, 2015 at 11:00
- Then quentin has answered it. "security policy". You can't touch things hosted on other domains while it is available in the iframe for you. – Jai Commented Aug 19, 2015 at 11:05
2 Answers
Reset to default 3You if would like add css style inside iframe using jQuery then just follow below steps...
1. First create 'index.html' file and add below code in it
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery./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
- Ensure that the frame document is on the same origin as the framing document so you don't have a security policy violation.
- Move the script so it appears after the frame so that the element exists before you try to access it
- Move the code into a function and use that as a
loadhandler for the frame so that the DOM you want to manipulate exists before you try to manipulate it