为什么iframe字体大小根本没有变化？

Question

我想将iframe字体大小更改为150％。我已经在css中设置然后结果不会改变哪个仍然是相同的小文本。为什么不改变尺寸？

这是我的css代码，

#frame{
font-size:150%;
}

.frame {
z-index:2000;
}

然后是我的HTML代码，

<div class="frame">
    <iframe id ="frame" srcdoc="<p></p>" width="930"></iframe>
</div>

然后是一个在iframe中打印文本的javascript代码，

document.getElementById("frame").srcdoc += transcript;

Answer 1

function changeSize(){
    var frame = document.getElementById("frame");
    var content = (frame.contentDocument || frame.contentWindow);
    content.body.style.fontSize = "150%";
}

尝试在将文本添加到iFrame之后调用此函数

document.getElementById("frame").srcdoc += transcript;
changeSize();

Answer 2

父页面中的CSS不会影响iframe内的任何内容。事实上，iframe几乎完全是从它出现的页面上的代码中取出来的。