更改 iframe 内的字体 [重复]
Posted
技术标签:
【中文标题】更改 iframe 内的字体 [重复]【英文标题】：Change font inside an iframe [duplicate] 【发布时间】：2014-11-15 19:14:09 【问题描述】：我有一个带有iframe 的html 页面。我想更改 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>
【问题讨论】：
【参考方案1】：这只有在iframe 的src 设置为同一域上的页面或满足Same-Origin Policy 时才有可能。您的问题没有说明您是否满足这些要求，但如果满足，您可以使用contentDocument property of the iframe 通过 javascript 操作 iframe。
示例：
document.getElementById("inneriframe").contentDocument.body.style.fontFamily = "Tahoma";
【讨论】：
【参考方案2】：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');
【讨论】：
以上是关于更改 iframe 内的字体 [重复]的主要内容，如果未能解决你的问题，请参考以下文章