1

我有一个带有子所见即所得编辑器的“显示：无”div。我在jHtmlArea和CKEditor上都遇到过这个问题，所以我认为这是一个 iframe 问题。对于此示例，我使用的是 jHtmlArea。没有“显示：无；”，一切正常。然而，当隐藏时，我用子编辑器“显示”了 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>

我已经尝试过这种解决方案，但无济于事。

4

3 回答 3

1

一种解决方法是通过 javascript 将显示设置为阻止和隐藏（）它。因此 iframe 将占据加载时可用的全部宽度。看到这个jsFiddle

于 2012-08-21T19:42:34.627 回答
1

如果您负担得起，请使用visibility:hidden样式而不是display:none. 缺点是隐藏元素将完全占据其文档区域，即使在visibility:visible设置之前不显示任何内容。

根据@Siwei 的回答，试试这个jsFiddle 。

编辑：更新了 jsFiddle 以使编辑器容器的垂直像素为 0，直到用户单击Show me。

于 2012-08-21T19:57:44.273 回答
1

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

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

  • 在 show() 回调函数中实例化 htmlarea
  • textarea 以“可见性：隐藏”开始，以在 show() 上保留空间，同时也减少 htmlarea 出现时的闪烁。
  • 在 htmlarea 实例化后将 textarea 设置回可见，以便“html”按钮仍然起作用

看到这个 jsFiddle

<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>
于 2012-08-22T12:52:04.787 回答