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中，则相对容易。

声明以下函数，该函数将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>执行相同操作以避免滚动条。

然后，在带有adjustPopover()的iframes onload-event中的popover初始化调用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文件 /css/normalize.css - ＆gt;的jsfiddle示例的 http://jsfiddle.net/ovky3796/

如您所见，我还在演示中更改了.popover max-width。这仅用于演示，如果您想根据<iframe>的内容调整弹出框的宽度，请使用scrollWidth执行上述操作。

Bootstrap Popover内容中的外部HTML文件

1 个答案: