javascript - 将数据传递给 iframe 以自定义内容

Question

我有一个 iFrame，里面有一个按钮，单击该按钮会将 iframe 扩展到其内容的高度。现在，这个按钮必须可以自定义其颜色、边框颜色和文本颜色。我想过使用 iFrame 属性来发送我需要的数据，在这种情况下是颜色，但我看不到这样做的方法。我正在尝试的解决方法是在 iframe 的名称中设置此信息并对其进行解析，但它看起来不像是最佳方法。

Answer 1

IFRAME 名称绝对不是一个很好的解决方案。您至少可以改用数据属性。

我相信有很多方法可以做到这一点。如果颜色是动态变化的，那么有一种沟通方式就很重要。如果不是动态的，您还可以将它们定义为 IFRAME URL 中的查询字符串参数，并直接在您的服务器上使用这些颜色来定义相应的脚本，包括从一开始就使用的颜色(尽管这意味着您的数据会根据颜色而变化...... .)

通过使用 jQuery 并在 IFRAME 中定义的脚本，您可以使用 window.frameElement 访问 IFRAME 标记。 .所以，我会这样写:

var f = window.frameElement;
if(f)
{
    var c, bc, tc;

    c = jQuery(f).data("color");
    bc = jQuery(f).data("border-color");
    tc = jQuery(f).data("text-color");
}

现在 c、bc 和 tc 变量具有您的颜色。

请注意，我测试了 f 以确保它存在。如果您的当前窗口未在 IFRAME 内定义，则 f == null 并且您可能希望以某种方式处理该特殊情况，就像在我上面的示例中那样忽略它。

相应的 HTML 如下所示:

<iframe id="my-iframe"
        data-color="#112233"
        data-border-color="#aabbcc"
        data-text-color="#666666"
        ...>
</iframe>

---

如果您想从父窗口访问 IFRAME，您可以改用它的 id 属性:

var iframe = jQuery("id");
c = iframe.data("color");
[...]