在彩盒 iframe 上设置正文字体大小答案

【问题标题】：setting body font-size on a colorbox iframe在彩盒 iframe 上设置正文字体大小
【发布时间】：2012-02-20 23:48:13
【问题描述】：

网站有一个 body{font-size:__px;) 使用 jQuery 基于窗口尺寸动态设置。 onclick 函数会打开一个包含 iframe 的颜色框：

$.fn.colorbox({iframe: true, href: $url, <?PHP print COLORBOX_OPTIONS; ?> });

我想将 iframe 的 body{font-size:--px;} 设置为与当前父 body{font-size:--px;} 相同我该怎么做？

【问题讨论】：

标签： javascript jquery css iframe colorbox

【解决方案1】：

您可以在 iframe 中执行此代码，它将其主体的 font-size 设置为父窗口的主体 font-size。

$(function(){
   $('body').css('font-size', $('body', window.parent).css('font-size'));
});

【讨论】：

在我的 iframe 中': $(document).ready(function() {} 。我把你的代码（在正文上加上更正的单引号！），不幸的是它似乎没有工作
如果父正文设置了字体大小，那么它应该可以正常工作。在 iframe 中不需要 `$(document).ready(function(){})`。我的代码已经负责在页面加载时执行它$(function(){}) 相当于。
它可能正在工作，但不是按需要。 iframe 的字体大小 (10px) 与父正文 css 字体大小 (10px) 相同，但与父正文元素上动态设置的字体大小 (11px) 不同！
两个页面共享一个共同的样式表，所以我不确定 iframe 正文字体大小是由脚本重置还是仅使用共同的样式表。
弹出这个到萤火虫或铬工具，看看你是否得到任何结果“document.body.style.fontSize”

【解决方案2】：

编辑：

在我的脑海中，未经测试！

在 $.colorbox();

之后

附加此

var bdFontSize = document.body.style.fontSize,
    targetIframe = $("iframe"),
    targetIframeHeadStyle = targetIframe.contents()
                                        .find("head")
                                        .append("<style></style>")
                                        .children("style");

编辑：不好

 targetIframeHeadStyle.html("
    body{
      font-size: "+bdFontSize+"
    }

");

好

    targetIframeHeadStyle.html("body{font-size: "+bdFontSize+"}");

让我们知道您的进展情况。

【讨论】：

我不确定什么时候调用它，直到调用 colorbox 函数时 iframe 才存在。我知道这是目标，但不确定如何使用它！谢谢
我重复上述答案的评论：感谢@ShankarSangoli 和@Philip，以下似乎有效：code $(function(){ $('body').css( '字体大小', parent.document.body.style.fontSize); });