Question

我的代码在这里：

$(document).ready(function(){
$('#button').click(function(){
   $('.accordion').html('<iframe src="google.com" frameborder="0" scrolling="no" id="myFrame"></iframe>');
});

请对此提供帮助。预先感谢。

Answer 1

您可以使用iFrame Resizer

该库可自动调整相同和跨域iFrame的高度和宽度，以适合其包含的内容。

完整的文档可以在这里找到，非常有用： github documentation for iFrame Resizer

将此脚本包含在您的页面中

<script src="https://raw.githubusercontent.com/davidjbradshaw/iframe-resizer/master/js/iframeResizer.min.js"></script>

示例

$(document).ready(function(){
$('#button').click(function(){
   $('.accordion').html('<iframe src="google.com" frameborder="0" scrolling="no" id="myFrame"></iframe>');

    iFrameResize({log:true}, '#myFrame');
});

Answer 2

在iframe中添加onload =“ resizeIframe（this）”并将resizeIframe（）添加到您的.js文件中

     <script>
    function resizeIframe(obj) {
    obj.style.height = obj.contentWindow.document.body.scrollHeight + 'px';
     }
     </script>
    <iframe src="..." frameborder="0" scrolling="no" onload="resizeIframe(this)" />

Answer 3

您可以使用.css()设置该元素的高度。因此，您需要像下面这样传递当前属性的ID：

$(document).ready(function(){
   $('#button').click(function(){
      $('.accordion').html('<iframe src="google.com" frameborder="0" scrolling="no" id="myFrame" onload="setHeight(this)"></iframe>');
   })

  function setHeight(content){
     $('#'+content.id).css('height', '100'+'px');// Whatever size you want.
  }

});

我使用jQuery创建一个iframe，如何根据其中的内容设置其高度

3 个答案: