Change font inside an iframe

javascript html css iframe

31,719

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";

31,719

Author by

Admin

Updated on January 22, 2020

Comments

Admin over 3 years

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>