额额。。。 2024-12-18 15:39 采纳率: 54.8%
浏览 12
已结题

iframe高度问题iframe嵌套在父页面后，通过控制台打印某个元素的offsetHeight是1200，但是在iframe页面打印这个元素的高度却是312

iframe高度问题
iframe嵌套在父页面后，通过控制台打印某个元素的offsetHeight是1200，但是在iframe页面打印这个元素的高度却是312，是怎么回事。没有给这个元素限定高度，只有margin-top和padding-bottom，我勒个，好奇怪啊，父页面已经加载了这个iframe，我需要获取到这个元素的高度，然后postMessage传递给父元素，但是获取了312，唉
我获取其他元素高度时，发现高度和css样式的padding-bottom值一样，我想可能是页面没加载好，元素没内容，我用window.onload等加载好再取高度，但是没东西，看了一天搜了很多也没发现问题，想来想去还是确定是页面没加载好，再试了window.onload，等了30秒左右才解析好，我勒个豆啊，然后高度是正确的，但是太慢了，这是咋回事。东西再多30s也不合理啊，而且东西也不多。只是几个菜单，都是一些文字，没图片视频的。这是为何

  • 写回答

1条回答 默认 最新

  • 码农阿豪@新空间 优质创作者: Java、后端开发技术领域 2024-12-18 15:48
    关注
    让码农阿豪来帮你解答，本回答参考通义千问qwen-plus模型编写提供，如果还有疑问可以评论或留言
    ### 问题分析

    你遇到的问题是关于 iframe 中元素高度不一致的情况。具体来说，你在父页面中通过控制台打印某个元素的 offsetHeight 是 1200，但在 iframe 页面中打印同一个元素的高度却是 312。这可能是由于以下几个原因导致的：

    1. 样式继承问题：iframe 内的元素可能会受到父页面样式的间接影响。
    2. 加载时机问题：父页面和 iframe 的加载时机不同，可能导致元素的高度在不同时间点被计算出不同的值。
    3. 布局问题：iframe 内部的布局可能与父页面的布局不同，导致高度计算不一致。

    解决方案

    为了确保你能正确获取到 iframe 内部元素的高度，并将其传递给父页面，可以采取以下步骤：

    1. 确保 iframe 完全加载：在 iframe 完全加载后再进行高度计算。
    2. 使用 postMessage 进行跨域通信：将 iframe 内部元素的高度通过 postMessage 传递给父页面。

    示例代码

    父页面代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Parent Page</title>
</head>
<body>
    <iframe id="myIframe" src="iframe.html" onload="onIframeLoaded()" style="width: 100%; height: 500px;"></iframe>

    <script>
        function onIframeLoaded() {
            const iframe = document.getElementById('myIframe');
            const iframeWindow = iframe.contentWindow;

            // 发送消息给 iframe，请求它发送元素高度
            iframeWindow.postMessage('getHeight', '*');
        }

        window.addEventListener('message', (event) => {
            if (event.data && event.data.type === 'elementHeight') {
                const elementHeight = event.data.height;
                console.log('Element height:', elementHeight);
            }
        });
    </script>
</body>
</html>

    iframe 页面代码

    <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Iframe Page</title>
    <style>
        .target-element {
            margin-top: 20px;
            padding-bottom: 20px;
        }
    </style>
</head>
<body>
    <div id="targetElement" class="target-element">Target Element</div>

    <script>
        window.addEventListener('message', (event) => {
            if (event.data === 'getHeight') {
                const targetElement = document.getElementById('targetElement');
                const elementHeight = targetElement.offsetHeight;

                // 将元素高度发送回父页面
                event.source.postMessage({ type: 'elementHeight', height: elementHeight }, event.origin);
            }
        });
    </script>
</body>
</html>

    说明

    1. 父页面：

      • 使用 onload 事件确保 iframe 完全加载后再进行操作。
      • 通过 postMessage 向 iframe 发送消息，请求它发送元素高度。
      • 监听 message 事件，接收 iframe 返回的元素高度。

    2. iframe 页面：

      • 监听 message 事件，接收父页面的消息。
      • 获取目标元素的高度，并通过 postMessage 将高度返回给父页面。

    通过这种方式，你可以确保在 iframe 完全加载后获取到正确的元素高度，并将其传递给父页面。

    评论

报告相同问题？

问题事件

  • 已结题 （查看结题原因） 5月29日
  • 修改了问题 12月19日
  • 创建了问题 12月18日