如何动态更新Wix中HTML嵌入元素的尺寸？

核心方案 #

通过iframe父子窗口通信（postMessage），让嵌入的HTML内容计算自身实际高度后通知Wix页面，再用Velo代码动态修改Embed元素的高度。

第一步：修正嵌入HTML中的高度计算逻辑 #

你当前代码里的估算高度误差较大，改为计算内容真实高度。修改handleMapClick函数如下：

function handleMapClick(event) {
    const countryId = event.target.id;
    const people = countryData[countryId];

    document.getElementById('country-welcome-title').innerHTML = 'Welcome to ' + countryId;

    if (!people) {
        document.getElementById('country-info').innerHTML = `No info yet: ${countryId}`;
        // 无内容时发送默认高度
        window.parent.postMessage({type: 'updateHeight', height: 200}, '*');
        return;
    }

    const parentList = document.createElement('ul');

    for (const person in people) {
        const personData = people[person];
        const parentBullet = document.createElement('li');

        const position = document.createElement('h2');
        position.textContent = personData.position;
        const location = document.createElement('p');
        location.textContent = personData.location;
        const description = document.createElement('p');
        description.textContent = personData.description;

        const socials = personData.socials;
        const socialsArray = document.createElement('div');
        for (const social in socials) {
            const linkParent = document.createElement('a');
            linkParent.setAttribute('href', socials[social]);
            const socialImg = document.createElement('img');
            socialImg.setAttribute('src', imgLinks[social]);
            socialImg.setAttribute('width', '40');

            linkParent.appendChild(socialImg);
            socialsArray.appendChild(linkParent);
        }

        parentBullet.appendChild(position);
        parentBullet.appendChild(location);
        parentBullet.appendChild(description);
        parentBullet.appendChild(socialsArray);
        parentList.appendChild(parentBullet);
    }

    // 清空原有内容，避免叠加导致高度计算错误
    document.getElementById('country-info').innerHTML = '';
    document.getElementById('country-info').appendChild(parentList);

    // 计算内容真实高度（含padding）
    const container = document.getElementById('country-info');
    const paddingTop = parseInt(window.getComputedStyle(container).paddingTop);
    const paddingBottom = parseInt(window.getComputedStyle(container).paddingBottom);
    const actualHeight = container.scrollHeight + paddingTop + paddingBottom + 20;
    
    // 向Wix父页面发送高度数据
    window.parent.postMessage({type: 'updateHeight', height: actualHeight}, '*');
}

主要修改点：

• 移除估算的heightRequired，改用scrollHeight获取真实内容高度
• 添加内容清空逻辑，避免重复叠加
• 通过window.parent.postMessage向Wix页面传递高度信息

第二步：在Wix页面添加Velo代码接收消息并调整高度 #

1. 打开Wix编辑器，点击左侧「代码」按钮进入Velo编辑器
2. 在页面onReady函数中添加消息监听代码：

$w.onReady(function () {
    // 监听嵌入HTML发送的消息
    window.addEventListener('message', (event) => {
        // 可选：验证消息来源（替换为你的嵌入HTML域名）
        // if (event.origin !== "https://your-embed-domain.com") return;

        if (event.data?.type === 'updateHeight') {
            // 替换#html1为你Embed元素的实际ID
            $w('#html1').height = event.data.height;
        }
    });
});

注意事项：

• 把#html1替换成你Embed元素的真实ID，可在Wix编辑器右侧「属性面板」查看
• 若嵌入HTML有固定域名，建议添加origin验证，提升安全性

关键说明 #

• Velo中Embed元素的height属性支持直接赋值修改，之前没找到是因为缺少通信逻辑
• scrollHeight会返回元素内容的总高度（含溢出部分），是最准确的高度计算方式
• 额外添加的数值用于适配页面样式，可根据实际情况调整

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