Question

我的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>

Answer 1

仅当iframe的{{1}}设置为同一域中的页面或以其他方式满足Same-Origin Policy时，才可以执行此操作。您的问题未指明您是否符合这些要求，但如果您这样做，则可以使用contentDocument property of the iframe通过JavaScript操纵iframe。

示例：

src

Answer 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中的字体

2 个答案: