jquery - Jquery Accordion 内的 iFrame

Question

我有一个页面，其中嵌入了一个 JQuery Accordion 内的 iFrame。

JS:

$(function() {
                $("#doc_accordion").accordion();
        });

HTML:

  <div id="doc_accordion">
                    <h3><a href="#">1</a></h3>
                    <div>
                    <iframe src="http://test.com/view.do?url=http://test2.com/xyz" style="width:600px; height:500px;" frameborder="0"></iframe>
                    </div>
                    <h3><a href="#">TESTING</a></h3>
                    <div>
                            <p>TESTING2</p>
                    </div>
            </div>

由于某种原因，我看不到嵌入的 iFrame，但我可以看到 Accordion 。另外，如果我删除行 $("#doc_accordion").accordion() 那么我可以看到 iFrame 正确嵌入到页面中。有其他人遇到过类似的问题吗？

Answer 1

我相信这是因为 IE 不会渲染隐藏元素的子元素。作为解决方法，您可以在 Accordion 外部加载 1 像素 x 1 像素的 iframe，并在 iframe 加载后将其移动到 Accordion 中。这是一个例子:

<div id="widget-box"> <!-- Accordion -->
    <h3><a href="#">Widget</a></h3>
    <div id="widget-placeholder">            
    </div>
</div>

<iframe id='widget-frame' style="height:1px; width:1px;" src='widget.html'></iframe>

<script type="text/javascript">
    $(function () {
        $("#widget-box").accordion({
            collapsible: true,
            autoHeight: false,
            active: false
        });
        $('#widget-frame').load(function () {
            if ($("#widget-placeholder > iframe").size() == 0) {
                $('#widget-placeholder').append($('#widget-frame'));
            }
            this.style.height = this.contentWindow.document.body.offsetHeight + 'px';
            this.style.width = '100%';
        });
    });
</script

>