Bootstrap Popover内容中的外部HTML文件

Question

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

Answer 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) 获取scrollHeightiframe（真实高度）
2) 获取.popover-content <div>与.pop-right
3) 设置.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。

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);
}

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

正如你所看到的，我也在.popover max-width演示中进行了更改。这仅用于演示，如果您想根据 的内容调整 popover 的宽度<iframe>，请按照上面的操作进行操作scrollWidth。