Vue.js中使用scrollHeight获取iframe内页面高度失败求助

核心问题分析 #

你当前代码在mounted钩子中直接获取iframe高度，这时候内部页面大概率还没加载完成，拿到的只是iframe初始的默认高度，而非真实内容高度。另外，仅获取body.scrollHeight也可能有遗漏，部分页面的可滚动高度由document.documentElement承载。

解决方案步骤 #

1. 等待iframe加载完成后再获取高度

通过监听iframe的load事件，确保内部页面渲染完毕后再读取高度：

<template>
    <q-card class="embed-card">
        <!-- 添加@load事件监听 -->
        <iframe :src="embed" frameborder="0" ref="lookerIframe" @load="handleIframeLoad"></iframe>
    </q-card>
</template>

<script>
import { defineComponent } from "vue";

export default defineComponent({
    name: "embed-card",
    props: {
        embed: {
            required: true,
        },
    },
    data: () => ({
        iFrameHeight: "",
    }),
    methods: {
        handleIframeLoad() {
            const iframe = this.$refs.lookerIframe;
            if (!iframe) return;
            
            const innerDoc = iframe.contentWindow.document;
            // 取多个高度属性的最大值，覆盖不同页面的布局情况
            const height = Math.max(
                innerDoc.body.scrollHeight,
                innerDoc.documentElement.scrollHeight,
                innerDoc.body.offsetHeight,
                innerDoc.documentElement.offsetHeight
            );
            
            this.iFrameHeight = `${height}px`;
            console.log(this.iFrameHeight);
            // 直接设置iframe高度实现自适应（可选）
            iframe.style.height = this.iFrameHeight;
        }
    },
});
</script>

2. 处理跨域场景（内部页面与父页面不同域）

如果iframe的src是外部域名，浏览器同源策略会禁止直接访问contentWindow.document，这时候需要通过postMessage实现跨域通信：

内部页面脚本：

// 内部页面中发送高度数据给父页面
function sendHeight() {
    const height = Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);
    // 生产环境请替换为父页面的具体域名，避免安全风险
    window.parent.postMessage({ type: 'iframeHeight', height }, '*');
}

// 页面加载完成发送一次
window.addEventListener('load', sendHeight);
// 内容动态变化时重新发送（比如监听resize事件）
window.addEventListener('resize', sendHeight);

父页面（Vue组件）修改：

<script>
import { defineComponent, onMounted, onUnmounted } from "vue";

export default defineComponent({
    name: "embed-card",
    props: {
        embed: {
            required: true,
        },
    },
    setup() {
        function handleMessage(event) {
            // 生产环境务必验证event.origin，防止恶意消息
            if (event.data.type === 'iframeHeight') {
                const iframe = document.querySelector('[ref="lookerIframe"]');
                iframe.style.height = `${event.data.height}px`;
            }
        }

        onMounted(() => {
            window.addEventListener('message', handleMessage);
        });

        onUnmounted(() => {
            window.removeEventListener('message', handleMessage);
        });

        return {};
    }
});
</script>

3. 额外注意事项

• 若内部页面有异步加载内容（比如接口渲染的列表），需要在内容加载完成后再次触发高度获取（可通过内部页面发送postMessage通知）
• 确保iframe未被设置固定高度的CSS样式，否则会覆盖动态设置的高度

内容的提问来源于stack exchange，提问作者Diego