iframe怎么设置子页面高度

   2025-02-04 6120
核心提示:可以通过以下几种方式来设置子页面的高度:使用CSS样式设置子页面的高度:style#myiframe {height: 500px;}/styleiframe id=myif

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

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

<style>#myiframe {  height: 500px;}</style><iframe id="myiframe" src="https://static.jirixiang.com/image/lazy.gif" class="lazy" original="https://static.jirixiang.com/image/nopic320.png">

使用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="https://static.jirixiang.com/image/lazy.gif" class="lazy" original="https://static.jirixiang.com/image/nopic320.png" 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="https://static.jirixiang.com/image/lazy.gif" class="lazy" original="https://static.jirixiang.com/image/nopic320.png">

请将上述代码中的https://static.jirixiang.com/image/nopic320.png替换为实际的子页面地址。

 
 
更多>同类维修知识