Bootstrap Popover 内容中的外部 HTML 文件

当我使用 iframe 在弹出窗口内容中加载外部 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 中时，这相对容易。

声明以下函数，该函数采用弹出框元素（.pop-right) 和弹出窗口内容<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) get scrollHeightiframe 的高度（实际高度）
2）得到.popover-content <div>有关联.pop-right
3) set .popover-content到真实高度，并对<iframe>以避免滚动条。

然后，在您的弹出窗口初始化调用中adjustPopover()在 iframes onload-event 中onload="adjustPopover(".pop-right", this);" :

$('.pop-right').popover({ 
   title : 'Loading External File',
   html : true,
   placement : "right",
   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/ http://jsfiddle.net/ovky3796/

正如你所看到的，我也改变了.popover max-width在演示中。这仅用于演示，如果您想根据弹出框的内容调整弹出框的宽度<iframe>，执行与上面相同的操作scrollWidth反而。