当我使用iframe在popover内容中加载外部html文件时,它限制为弹出窗口高度.但我希望弹出窗口的高度是自动的.有人帮助我.
$(document).ready(function(){
$('.pop-right').popover({
title : 'Loading External File',html : true,placement : "right",content: function () {
return '
最佳答案
如果您没有交叉管理’,即您没有将google.com或类似内容加载到iframe中,则相对容易.
声明下面的函数,它接受popover元素(.pop-right)和popover内容< iframe>作为参数:
function adjustPopover(popover,iframe) {
var height = iframe.contentWindow.document.body.scrollHeight + 'px',popoverContent = $(popover).next('.popover-content');
iframe.style.height = height;
popoverContent.css('height',height);
}
1)获取iframe的scrollHeight(实际高度)
2)获取.popover-content< div>与.pop-right相关联
3)将.popover-content设置为实际高度,并对< iframe>执行相同操作.避免使用滚动条.
然后,在你的popover初始化调用iframes onload-event中的adjustPopover()on onload =“adjustPopover(& quot; .pop-right& quot;,this);” :
$('.pop-right').popover({
title : 'Loading External File',content: function() {
return '
为iframe设置最小高度是个好主意.如果你不这样做,弹出窗口将始终至少具有iframe的浏览器默认高度,在chrome 150px中.
iframe {
height: 40px;
min-height : 40px;
}
这是一个jsfiddle示例加载jsfiddle文件/css/normalize.css – > http://jsfiddle.net/ovky3796/
如您所见,我还在演示中更改.popover max-width.这仅用于演示,如果您想根据< iframe>的内容调整弹出窗口的宽度,请使用scrollWidth执行与上面相同的操作.
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。