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

Posted 2023-05-09

【中文标题】在彩盒 iframe 上设置正文字体大小

【英文标题】：setting body font-size on a colorbox iframe

【发布时间】：2012-02-20 23:48:13

【问题描述】：

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

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

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

【参考方案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("bodyfont-size: "+bdFontSize+"");

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

【讨论】：

我不确定什么时候调用它，直到调用 colorbox 函数时 iframe 才存在。我知道这是目标，但不确定如何使用它！谢谢

我重复上述答案的评论：感谢@ShankarSangoli 和@Philip，以下似乎有效：code $(function() $('body').css( '字体大小', parent.document.body.style.fontSize); );