Jquery手风琴内的iFrame

时间:2010-02-18 19:15:58

标签: jquery jquery-ui jquery-ui-accordion

我有一个页面,在JQuery手风琴中嵌入了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,但我可以看到手风琴。此外,如果我删除行$("#doc_accordion").accordion(),那么我可以看到iFrame正确嵌入页面中。还有其他人遇到过类似的问题吗?

3 个答案:

答案 0 :(得分:2)

我相信这是因为IE不会呈现隐藏元素的子元素。作为一种解决方法,您可以在手风琴之外加载1px x1xx iframe,并在加载iframe后将其移动到手风琴中。这是一个例子:

<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

&GT;

答案 1 :(得分:0)

选项可能正在使用以下内容:

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

据我所知,手风琴隐藏了未显示的元素,这可能会干扰将页面加载到Iframe中。

答案 2 :(得分:0)

我已经测试过你的代码&amp;在Firefox和&amp; Mac上的Safari和PC上的IE7。我可以正确看到iframe。这可能是一个浏览器或CSS问题?

您是否尝试过声明宽度&amp;周围div标签的高度也是如此?您可以使用click()函数进行设置。但在此期间尝试手动添加'style =“width:600px; height:500px;”'到div标签进行测试。

它也可能与您正在使用的jQuery脚本有关。我在head标签中使用了这两个js脚本:

<script type="text/javascript" src="jquery-1.3.2.js" ></script>
<script type="text/javascript" src="jquery-ui-1.7.2.custom.min.js" ></script>

我即将开始尝试手风琴和放大器iframes(因此感兴趣)......

相关问题