我有一个页面,其中嵌入了一个 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 正确嵌入到页面中。还有其他人遇到过类似的问题吗?
我相信这是因为 IE 不会渲染隐藏元素的子元素。作为解决方法,您可以在手风琴外部加载 1 像素 x 1 像素的 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
>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)