如何实现Trustpilot第三方iframe内容更新时高度自适应且限高400px

该需求可以实现，无需修改第三方iframe内容，仅需要调整本地样式和新增少量JS代码即可，具体操作如下：

1. 调整CSS样式 #

先覆盖iframe的默认行内样式，确保最大高度限制生效，超过高度时显示滚动条：

.trust-review .trustpilot-widget iframe {
    /* 优先级高于iframe行内样式 */
    max-height: 400px !important;
    overflow-y: auto !important;
    border: none;
    width: 100%;
}

2. 新增JS监听动态调整高度 #

因为iframe是第三方跨域资源，无法直接读取内部DOM高度，但Trustpilot部件会通过postMessage主动向父页面发送内容高度变化的通知，我们只需要监听该消息动态设置iframe高度即可：

window.addEventListener('message', function(e) {
    // 校验消息来源为Trustpilot，避免安全风险
    if (!e.origin.includes('trustpilot.com') || e.data?.type !== 'heightChange') return;
    const tpIframe = document.querySelector('.trustpilot-widget iframe');
    if (!tpIframe) return;
    // 取内容高度和400px的最小值，确保不超过高度上限
    const finalHeight = Math.min(e.data.height, 400);
    tpIframe.style.height = `${finalHeight}px`;
}, false);

效果说明 #

• 无评论或评论较少时：iframe高度会自动适配实际内容高度，不会出现大面积空白
• 评论较多内容高度超过400px时：iframe高度固定为400px，内部显示滚动条，用户可滚动查看全部评论

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