如何根据iframe中的内容设置其高度？

11 浏览
0 Comments

如何根据iframe中的内容设置其高度？

根据其内部内容获取和设置iframe。默认高度为150像素。我尝试使用document.documentelement.clientheight来获取高度，

0

2 答案

0 Comments

如何根据iframe中的内容设置iframe的高度？

为了解决这个问题，您首先需要获取iframe元素。然后将iframe的高度设置为iframe内部内容的body高度。

const iframe = document.getElementById('myIframe');
iframe.style.height = iframe.contentWindow.document.body.offsetHeight;

0
0 Comments

从上述内容中可以看出，问题的出现是为了解决在iframe中根据内容设置高度的需求。为了实现这一目标，可以创建两个函数，一个在创建iframe的文档中，另一个在显示在iframe中的文档中。

父级函数中，通过传入的参数（高度和宽度），设置iframe的宽度和高度。

子级函数中，通过获取子级文档的body元素的高度和宽度，调用父级函数来设置iframe的高度和宽度。这个函数应该在子级文档加载完成后调用。

以下是代码示例：

父级函数：

$.fn.setSizeIframe = function(height,width) {
  $("#idIframe").width(width);
  $("#idIframe").height(height);
}

子级函数：

$.fn.mySize = function(){
  let height = $("body").height();
  let width = $("body").width();
  parent.$.fn.setSizeIframe(height,width);
}
$(document).ready(function(){
  $.fn.mySize();
});

通过这样的方式，可以根据iframe中的内容动态调整iframe的高度。

0