跨域父页面通过postMessage给iframe设sessionStorage在iOS端无触发问题

问题场景还原 #

我之前碰到过完全一致的棘手问题：父页面内嵌了一个iframe，原本的逻辑是在window.onload触发时，通过postMessage向iframe发送指定URL，同时把该URL存入iframe域名下的sessionStorage。这套逻辑在Chrome、Firefox、IE等桌面浏览器里跑起来毫无问题，但到了iOS 11的Chrome和Safari移动端直接失效——消息根本发不出去，iframe的sessionStorage也完全没被设置。而且确认过手机没有开启阻止Cookie的设置，排除了权限限制的可能。

核心解决方案 #

最终搞定这个问题的关键改动非常简单：把触发postMessage的时机从window.onload替换成iframe.onload。

背后的原因是，在iOS 11的移动端浏览器中，window.onload触发时iframe可能还没完成完整加载，此时iframe的上下文环境尚未就绪，发送的postMessage会直接丢失。而绑定到iframe.onload事件，能确保我们是在iframe完全加载就绪后再发送消息，这样iframe就能正常接收并处理消息，顺利完成sessionStorage的写入操作。

代码示例对比 #

原问题代码（iOS 11移动端失效）

window.onload = function() {
  const targetIframe = document.getElementById('myIframe');
  targetIframe.contentWindow.postMessage('https://example.com/target-url', '*');
};

修改后可行代码

const targetIframe = document.getElementById('myIframe');
targetIframe.onload = function() {
  this.contentWindow.postMessage('https://example.com/target-url', '*');
};

安全提示 #

生产环境中建议不要用*作为postMessage的目标origin，指定具体的iframe域名能避免安全风险，比如：

this.contentWindow.postMessage('your-target-url', 'https://your-iframe-domain.com');

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