7

I have a HTML page that have an iframe. I want to change style of iframe content but I don't seem to be able to do so.

I want to change the font of all content inside the iframe to "Tahoma". This is my code:

<!DOCTYPE>

<html>
<head>

<title>phpinfo()</title>
<style type="text/css">
#outerdiv
{
width:446px;
height:246px;
overflow:hidden;
position:relative;
}

#inneriframe
{
position:absolute;
top: -508px;
left: 0px;
width: 100%;
height: 615px;
font-family: Tahoma;
}
</style>

<script>
onload = function()
{
 document.frm.document.body.style.fontFamily = "Tahoma";
}
</script>

</head>

<body>
<div id='outerdiv '>
<iframe  name="iframe" src="http://m.sarafikish.com" id='inneriframe' name="frm" scrolling=no frameborder="0"  > </iframe>
</div>    
</body></html>
Jeroen
  • 60,696
  • 40
  • 206
  • 339
Abbas
  • 81
  • 1
  • 1
  • 2

2 Answers2

12

This is only possible if the iframe's src is set to a page on the same domain or otherwise satisfies the Same-Origin Policy. Your question does not specify if you meet these requirements, but if you do, you can use the contentDocument property of the iframe to manipulate the iframe through JavaScript.

Example:

document.getElementById("inneriframe").contentDocument.body.style.fontFamily = "Tahoma";
Alexander O'Mara
  • 58,688
  • 18
  • 163
  • 171
2
var frame = $('#frameId');
frame.load(function () {
    frame.contents().find('body').css('font-family', 'Arial');
}

If you want to use custom font:

var frame = $('#frameId');
frame.load(function () {
    var head = frame.contents().find('head');
    $('<link/>', {
        rel: "stylesheet",
        type: "text/css",
        href: "/url/to/style_with_fonts.css"
    }).appendTo(head);
    frame.contents().find('body').css('font-family', 'Custom Font');
}
j4r3k
  • 156
  • 5