Bootstrap Popover 内容中的外部 HTML 文件答案

【问题标题】：External HTML file in Bootstrap Popover contentBootstrap Popover 内容中的外部 HTML 文件
【发布时间】：2014-04-14 12:36:44
【问题描述】：

当我使用 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>';    
        });
    }
  });
});

【问题讨论】：

标签： jquery twitter-bootstrap popover

【解决方案1】：

当您没有跨域时，即您没有将 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) 获取 iframe 的scrollHeight（真实高度）
2）获取与.pop-right关联的.popover-content<div>
3) 将.popover-content 设置为实际高度，对<iframe> 执行相同操作以避免滚动条。

然后，在带有onload="adjustPopover(&quot;.pop-right&quot;, this);" 的 iframe onload-event 中的弹出框初始化调用 adjustPopover() 中：

$('.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/

如你所见，我还在演示中更改了.popover max-width。这只是为了演示，如果你想根据<iframe>的内容来调整popover的宽度，用scrollWidth做同样的操作。

【讨论】：