Bootstrap Popover内容中的外部HTML文件 [英] External HTML file in Bootstrap Popover content

问题描述

当我使用iframe在弹出式内容中加载外部html文件时，它会限制弹出式窗口的高度.但是我希望弹出窗口的高度是自动的.有人帮我.！

When I use iframe to load external html file in popover content, it is restricting to popup height. But I want popup height to be auto. Some one help me out .!

$(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中，这相对容易.

When you are not cross-domaining', i.e. you are not loading google.com or similar into the iframe, it is relatively easy.

声明以下函数，该函数以popover元素(.pop-right)和popover内容<iframe>作为参数:

Declare the below function, which takes the popover element (.pop-right) and the popover content <iframe> as parameters :

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>进行相同操作以避免滚动条.

1) get scrollHeight of the iframe (the real height)
2) get the .popover-content <div> associated with .pop-right
3) set .popover-content to the real height, and do the same with the <iframe> to avoid scrollbars.

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

Then, in your popover initialisation call adjustPopover() in the iframes onload-event with 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.

It is a good idea to set a minimum height for the iframes. If you dont do that, popovers will always have at least the browsers default height of an iframe, in chrome 150px.

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

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

Here is an jsfiddle example loading the jsfiddle file /css/normalize.css -> http://jsfiddle.net/ovky3796/

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

As you see, I also changes .popover max-width in the demo. This is for demonstration only, if you want to adjust the width of the popover according to the content of the <iframe>, do the same as above with scrollWidth instead.

这篇关于Bootstrap Popover内容中的外部HTML文件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！