iFrame inside Jquery accordion

问题

I have a page that has an iFrame embedded inside a JQuery accordion.

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>

For some reason I can not see the embedded iFrame but I can see the accordion. Also if i remove the line $("#doc_accordion").accordion() then I can see the iFrame correctly embedded in the page. Has anyone else experienced a similar problem?

回答1:

This I believe is because IE does not render children of hidden elements. As a workaround, you can load a 1px by 1px iframe outside the accordion and move it into the accordion once the iframe has loaded. Here is an example:

<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

回答2:

An option might be using the following:

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

As far as I know the accordion hides the elements that are not shown, and this might interfere with the loading of the page into the Iframe.

回答3:

I have tested your code & seems fine in Firefox & Safari on the Mac, and IE7 on the PC. I can see the iframe correctly. It's maybe a browser or CSS issue?

Have you tried declaring the width & height of the surrounding div tag as well? You can set it using a click() function. But in the meantime try adding 'style="width:600px; height:500px;"' to the div tag manually for now to test it.

It also may have something to do with what jQuery scripts you are using. I was using these two js scripts within the head tag:

<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>

I'm about to start experimenting with accordion & iframes myself (hence the interest)...

来源：https://stackoverflow.com/questions/2291482/iframe-inside-jquery-accordion

标签

jquery

jquery-ui

jquery-ui-accordion