Javascript 将数据传递到iframe以自定义内容

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

IFRAME名称肯定不是一个很好的解决方案。至少可以使用数据属性

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

通过使用jQuery并在IFRAME中定义的脚本，可以使用访问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");
}

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

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

注意，我测试f以确保它存在。如果当前窗口没有在IFRAME中定义，那么f==null，您可能希望以某种方式处理这种特殊情况，可以像上面的示例中那样忽略它

相应的HTML如下所示：

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");
}

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

---

我的frameElement总是返回null，知道为什么吗？您是在IFRAME或父窗口中的JavaScript函数中使用该变量吗？在父窗口中window@NelsonSilva可以我做了一个更新，向您展示如何从父级访问IFRAME。frameElement从子元素开始工作。