2014-09-21 520 views
2

我有一個具有iframe的HTML頁面。我想改變iframe內容的風格,但我似乎無法做到這一點。更改iframe中的字體

我想將iframe中的所有內容的字體更改爲「Tahoma」。這是我的代碼:

<!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> 

回答

2

如果iframesrc被設置在頁面上相同的域或以其他方式滿足Same-Origin Policy這是唯一可行的。你的問題沒有說明你是否滿足這些要求,但如果你這樣做,你可以使用contentDocument property of the iframe來通過JavaScript操作iframe。

例子:

document.getElementById("inneriframe").contentDocument.body.style.fontFamily = "Tahoma"; 
0
var frame = $('#frameId'); 
frame.load(function() { 
    frame.contents().find('body').css('font-family', 'Arial'); 
} 

如果你想使用自定義字體:

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'); 
}