Javascript jQuery show div与子iframe（所见即所得文本编辑器）

我有一个带有子wysiwyg编辑器的“display:none”div。我和都有这个问题，所以我认为这是一个iframe问题。对于这个例子，我使用jHtmlArea。没有“display:none；”，一切正常。但是，当隐藏时，我使用子编辑器“显示”div，然后它就不会完全加载。我不久前就研究过这个问题，但找不到解决方案。我相信我记得我发现一些东西，说隐藏的iFrame有某种重新加载的问题，但找不到帖子。有人有什么建议吗？提前感谢您的时间和专业知识

<script type="text/javascript">
    $(document).ready(function () {
        $("textarea").htmlarea();
    });
</script>

<div id="container" style="display: none;">
    <textarea></textarea>
</div>

<a href="javascript:void(0);" onclick="$('#container').show()">Show me!</a>

$（文档）.ready（函数（）{
$（“textarea”）.htmlarea（）；
});

---

我已经试过了，但没有效果。

一种解决方法是通过javascript将显示设置为block并隐藏（）。因此，iframe将占用加载时可用的全部宽度。查看此

如果您负担得起，请使用

可见性：隐藏

样式，而不是

显示：无

。缺点是，隐藏元素将完全占据其文档区域，即使在设置了

可见性：可见

之前没有显示其内容

根据@Siwei的答案，尝试一下

---

编辑：更新了JSFIDLE，使编辑器容器具有0个垂直像素，直到用户单击Show me

感谢@Humberto和@Siwei Kang的建议。他们的工作帮助我想出了这个解决方案

我在点击按钮时实例化了htmlarea，而不是在页面加载时。我还添加了一些附加功能：

• 在show（）回调函数中实例化htmlarea
• textarea以“可见性：隐藏”开头，用于保留show（）上的不动产，但也用于减少出现htmlarea时的闪烁
• 在htmlarea实例化之后，将textarea设置回可见，这样“html”按钮仍然可以工作

看

函数切换（）{
$（'#container'）。切换（'blind'，function（）{
$（'#container textarea'）.htmlarea（）.css（“可见性”、“可见”）；
});
}

谢谢@Siwei Kang的帮助。您的解决方案确实有效，但不幸的是，由于工作流限制，我无法在doc ready上设置display属性。你的工作确实帮助我想出了一个解决方案，我将把它作为答案发布。谢谢@Humberto的帮助。您的解决方案确实有效，但我没有足够的空间让它保持可见性：隐藏。你的工作确实激发了我的部分解决方案，我将把它作为答案发布。很好的解决方案，祝贺你！

<script type="text/javascript">
    function toggle() {
        $('#container').toggle('blind', function() {
            $('#container textarea').htmlarea().css("visibility", "visible");
        });
    }
</script>

<div id="container" style="display: none;">
    <textarea style="visibility: hidden; width: 300px;"></textarea>
</div>

<a href="javascript:void(0);" onclick="toggle();">Toggle me!</a>