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:500开发者_Python百科px;" 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?
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
>
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.
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)...
精彩评论