javascript - 为什么 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 几乎完全脱离了它出现的页面上的代码。