JavaScript向跨域iframe发送postMessage报contentWindow未定义问题

云原生阿岚

2026-9-29

问题原因及修复方案

核心原因

你代码中$("#iframe")拿到的是jQuery封装的对象，并非原生DOM元素，只有原生iframe DOM元素才拥有contentWindow属性，jQuery对象本身没有这个属性，所以直接调用就会报未定义错误。
你在Chrome控制台执行没报错，大概率是控制台环境下如果页面元素设置了id为iframe，直接输入iframe默认会返回原生DOM元素，和你代码中用jQuery选择器拿到的对象类型不一致。

其他可能诱因

iframe还未完全加载完成就触发了执行逻辑
动态渲染的iframe在按钮触发时还没插入到DOM树中，选择器没有匹配到任何元素

修复方案

先将jQuery对象转为原生DOM元素，同时增加非空判断避免异常：

scroll(i) {
  // 取第一个匹配的iframe原生DOM元素
  const iframe = $("#iframe").get(0);
  // 提前校验元素和contentWindow存在再执行后续逻辑
  if (!iframe || !iframe.contentWindow) return;
  const targetSrc = iframe.getAttribute("src");
  iframe.contentWindow.postMessage(i, targetSrc);
}