iframe怎么设置子页面高度-开发者知识库平台

iframe怎么设置子页面高度

iframe

870

2024/1/4 18:11:09

栏目: 编程语言

可以通过以下几种方式来设置子页面的高度：

使用CSS样式设置子页面的高度：

<style>
#myiframe {
  height: 500px;
}
</style>
<iframe id="myiframe" src="子页面地址"></iframe>

使用JavaScript动态设置子页面的高度：

<script>
function setIframeHeight() {
  var iframe = document.getElementById("myiframe");
  var iframeBody = iframe.contentDocument.body;
  var iframeHeight = iframeBody.scrollHeight;
  iframe.style.height = iframeHeight + "px";
}
</script>
<iframe id="myiframe" src="子页面地址" onload="setIframeHeight()"></iframe>

使用jQuery设置子页面的高度：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function() {
  $("#myiframe").on("load", function() {
    var iframeHeight = $(this).contents().find("body").height();
    $(this).height(iframeHeight);
  });
});
</script>
<iframe id="myiframe" src="子页面地址"></iframe>

请将上述代码中的"子页面地址"替换为实际的子页面地址。

辰迅云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>

iframe怎么设置子页面高度

最新知识库

相关标签