转转我在 2024-01-12 14:08 采纳率: 0%
浏览 2

关于#jquery#的问题，请各位专家解答！

实现子页面加载完成后根据具体body的高度给父页面 iframe设置一个适合的高度

  • 写回答

1条回答 默认 最新

  • 一休哥助手 2024-01-12 16:14
    关注

    img


    该回答引用一休哥助手
    在jQuery中，你可以使用$(window).on('load', function() {...})事件来检测子页面加载完成。然后，通过contentWindow.document.body.scrollHeight获取子页面body的高度，并将其设置为父页面iframe的高度。

    以下是一个简单的示例：

    <!-- 父页面 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>父页面</title>
    <script src="https://code.jquery.com/jquery-3.6.4.min.js"></script>
</head>
<body>
    <iframe id="myIframe" src="子页面.html" width="100%" frameborder="0"></iframe>

    <script>
        $(document).ready(function () {
            // 子页面加载完成后
            $('#myIframe').on('load', function () {
                // 获取子页面body的高度
                var childBodyHeight = $(this).contents().find('body').height();

                // 设置iframe的高度
                $(this).height(childBodyHeight);
            });
        });
    </script>
</body>
</html>

    在上述代码中，当子页面加载完成后，通过$('#myIframe').on('load', function () {...})事件来获取子页面的高度，然后使用$(this).height(childBodyHeight)将父页面iframe的高度设置为子页面body的高度。

    确保在父页面中引入jQuery库。希望这对你有帮助！

    评论

报告相同问题？

问题事件

  • 创建了问题 1月12日

悬赏问题

  • ¥50 用易语言http 访问不了网页
  • ¥50 safari浏览器fetch提交数据后数据丢失问题
  • ¥15 matlab不知道怎么改，求解答！！
  • ¥15 永磁直线电机的电流环pi调不出来
  • ¥15 用stata实现聚类的代码
  • ¥15 请问paddlehub能支持移动端开发吗？在Android studio上该如何部署？
  • ¥20 docker里部署springboot项目，访问不到扬声器
  • ¥15 netty整合springboot之后自动重连失效
  • ¥15 悬赏！微信开发者工具报错，求帮改
  • ¥20 wireshark抓不到vlan