调用父页面const函数报错Uncaught TypeError，求解决方法

问题原因 #

你用const定义的myFunction属于父页面的局部作用域变量，没有挂载到全局的window对象上，因此子页面通过window.parent无法访问到该函数，才会抛出myFunction is not a function的错误。

解决方案 #

1. 同域场景下的直接解决方法

修改父页面的函数定义，将其挂载到window全局对象上，让子页面能通过window.parent访问：

// 父页面代码修改为
window.myFunction = () => {
    alert("Hi there!!!!")
    console.log("From child")
}

之后在子页面中，直接调用window.parent.myFunction()就能触发alert提示。

2. 跨域场景下的替代方案

如果父页面和子页面不同域（受浏览器同源策略限制），无法直接访问window.parent的属性，这时候可以用postMessage实现通信：

• 父页面监听message事件：

window.addEventListener('message', (event) => {
    // 建议添加origin验证，限制只接收可信域名的消息
    // if (event.origin !== 'https://your-child-domain.com') return;
    if (event.data === 'callMyFunction') {
        myFunction(); // 调用原本的局部函数
    }
});

• 子页面发送消息触发：

window.parent.postMessage('callMyFunction', '*'); 
// 建议替换*为父页面的具体域名，提升安全性

内容的提问来源于stack exchange，提问作者diego anderson quintero diaz