Linux 拨号vps windows公众号手机端

iframe怎么设置子页面高度

lewis 8年前 (2017-02-14) 阅读数 8 #程序编程
文章标签 iframe

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

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

    <style>
    #myiframe {
      height: 500px;
    }
    </style>
    <iframe id="myiframe" src="子页面地址"></iframe>
    
  2. 使用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>
    
  3. 使用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>
    

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

版权声明

本文仅代表作者观点,不代表米安网络立场。

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

热门