你是不是也遇到过在H5页面里嵌入另一个页面后，发现两个页面之间无法互相调用方法？就像手机里的微信小程序突然打不开淘宝链接，这种跨页面交互的难题其实困扰过很多新手。今天我们就用最直白的语言，手把手教你搞定iframe父子页面的方法互调。

先来说个真实场景：你的主页面有个"立即购买"按钮，点击后需要唤起嵌入的商品详情页里的库存检查功能。这时候要是不知道父子页面怎么通信，按钮点烂了都没反应。其实解决方法就藏在浏览器提供的几个关键API里，咱们往下看。

??一、同源情况下的互调方法??
当父子页面域名完全相同时（比如都是http://www.yoursite.com），事情就简单多了。举个例子来说，父页面要调用子页面的showStock方法，只需要三行代码：

javascript复制
// 父页面获取iframe元素
let iframe = document.getElementById('productFrame');
// 等待iframe加载完成
iframe.onload = function() {
  iframe.contentWindow.showStock(); // 调用子页面方法
}

反过来，子页面想调用父页面的refreshCart方法，用parent这个关键词就能搞定：

javascript复制
// 子页面直接调用父级方法
parent.refreshCart();

这里有个容易栽跟头的地方——必须等iframe完全加载完毕才能操作。有人试过在页面刚渲染时就调用方法，结果死活不生效，其实就是没加onload监听。建议新手养成习惯，像等外卖送达再开门取餐一样，等iframe加载好再操作。

??二、跨域难题的破解之道??
要是父子页面域名不同，比如主站是http://www.mall.com，商品页是item.supplier.com，事情就棘手了。但别慌，postMessage这个神器就是为跨域通信而生的。

父页面向子页面发消息的姿势：

javascript复制
// 父页面发送库存查询请求
iframe.contentWindow.postMessage(
  { action: 'checkStock', sku: 'A123' }, 
  'https://item.supplier.com'
);

子页面这边得装个"耳朵"来听：

javascript复制
window.addEventListener('message', (event) => {
  // 先验证消息来源
  if(event.origin !== 'https://www.mall.com') return;
  
  if(event.data.action === 'checkStock') {
    let stock = getStockBySku(event.data.sku);
    // 回传结果给父页面
    event.source.postMessage({ stock }, event.origin);
  }
});

注意这里有两个安全细节：1、必须验证event.origin防止恶意网站攻击；2、postMessage第二个参数要明确指定目标域名，用通配符*虽然方便但存在安全隐患。就像不会随便把家门钥匙给陌生人，跨域通信也要守好安全底线。

??三、那些新手常踩的坑??

1. ??路径匹配问题??：有开发者反馈明明域名相同，但www站点和二级域名通信失败。这时候需要设置document.domain：

javascript复制
// 父页面和子页面都要设置
document.domain = 'yoursite.com'; 

但注意chrome新版已经限制了这个方法，还是建议用postMessage更可靠。

1. ??移动端适配??：在手机浏览器里，iframe高度经常出问题。有个取巧的办法：

javascript复制
// 自动调整iframe高度
iframe.style.height = window.innerHeight + 'px';
window.addEventListener('resize', () => {
  iframe.style.height = window.innerHeight + 'px';
});

这样无论用户横屏竖屏，内容都能完整显示。

1. ??参数传递误区??：很多人直接把JSON对象扔进postMessage，结果收不到数据。正确的做法是先JSON.stringify()，接收方再JSON.parse()，就像寄快递要把物品装箱打包一样。

??四、自问自答环节??
Q：为什么我用vue框架时iframe方法调用总失败？
A：这通常是因为vue的虚拟DOM机制导致获取iframe元素时机不对。试试在mounted生命周期里加个setTimeout延迟操作，或者用vue的$nextTick方法确保DOM渲染完成。

Q：子页面怎么判断自己是被哪个父页面调用的？
A：可以通过parent.location.pathname获取父页面路径，再用字符串匹配识别。就像快递员根据门牌号投递包裹，不同父页面对应不同处理逻辑。

其实搞懂iframe通信的关键，就是把浏览器当作中介所。父页面要找人办事，得先通过iframe这个接待窗口登记需求，子页面收到通知后再联系具体办事人员。只要遵守浏览器的"中介规则"，再复杂的交互也能迎刃而解。不过要注意现在很多移动端应用逐渐用webview替代iframe，但原理都是相通的，掌握这些核心方法照样能举一反三。