换了一套第三方评论系统 容器高度写死 600px 评论超过五条就被截断 右边多出一条内层滚动条 父页面想直接量内部高度 控制台报 Blocked a frame from accessing a cross-origin frame。碰到这种情况,我一般先确认改动有没有真的生效。

原因不复杂,iframe 不会因为内部内容变高而长高 高度由父页面决定 写死数值只能靠内部滚动 父页面又量不到内部尺寸 双层滚动在触屏上很难受。

碰到「评论 iframe 高度」这类问题,我习惯先把当前配置原样备份一份,改坏了立刻换回来,不用现场推。报错里带路径的,先去看那个路径在不在、权限对不对。

window.addEventListener('message', e => {
  if (e.origin !== 'https://cmt.b.com') return;
  frame.style.height = e.data.height + 'px';
});

具体做法是,让评论服务在内容变化时用 postMessage 把真实高度发给父页面;父页面监听 message 先校验来源域名 再去改 iframe 的高度 别直接信任对方给的值;拿不到对方配合就把最小值设大一点 至少别出现内层滚动条。

最后用这个标准收尾,评论全部展开后没有内层滚动条 页面只剩一个滚动条 手机上也顺畅。

作者 9823189