Menu
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>
907
asked Sep 21 '14 20:09
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";
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');
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
