jquery – Bootstrap Popover内容中的外部HTML文件

$(document).ready(function(){
  $('.pop-right').popover({ 
title : 'Loading External File',html : true,placement : "right",content: function () {
      return '<iframe src="popover-content.html" style="border:none"></iframe>';    
        });
    }
  });
});

如果您没有交叉管理’,即您没有将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 src="content.html" style="border:none" onload="adjustPopover(&quot;.pop-right&quot;,this);"></iframe>';    
   }
});

为iframe设置最小高度是个好主意.如果你不这样做,弹出窗口将始终至少具有iframe的浏览器默认高度,在chrome 150px中.

iframe {
    height: 40px;
    min-height : 40px;
}

这是一个jsfiddle示例加载jsfiddle文件/css/normalize.css – > http://jsfiddle.net/ovky3796/

如您所见,我还在演示中更改.popover max-width.这仅用于演示,如果您想根据< iframe>的内容调整弹出窗口的宽度,请使用scrollWidth执行与上面相同的操作.