Jquery手风琴内的iFrame [英] iFrame inside Jquery accordion
问题描述
我有一个页面,在JQuery手风琴中嵌入了iFrame。
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>
出于某种原因,我看不到嵌入式iFrame,但我可以看到手风琴。此外,如果我删除行 $(#doc_accordion)。accordion()
然后我可以看到iFrame正确嵌入页面中。还有其他人遇到过类似的问题吗?
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?
推荐答案
我相信这是因为IE不会渲染子元素的隐藏元素。作为一种解决方法,您可以在手风琴之外加载1px x1xx iframe,并在加载iframe后将其移动到手风琴中。以下是一个示例:
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
>
这篇关于Jquery手风琴内的iFrame的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!