通过iframe的JavaScript伪协议调用函数提示未定义，求助排查

嘿，这个问题我之前踩过坑！核心问题出在iframe的JavaScript伪协议代码执行环境和主页面的全局上下文是完全隔离的，具体来说：

为什么会提示"函数未定义"？ #

• iframe有自己独立的window全局对象，当你通过src="javascript:xxx()"这种伪协议执行代码时，这段代码是运行在iframe自身的全局作用域里，而不是主页面的作用域。
• 你的函数定义在主页面的<head>引入的JS文件中，属于主页面的window对象，iframe的全局作用域根本访问不到这个函数，所以会抛出未定义的错误。

可行的解决方案 #

1. 直接通过parent对象调用主页面函数（同域场景） #

如果你的iframe和主页面是同域的，可以在伪协议里直接用parent指向主页面的全局上下文，调用你的函数：

<iframe src="javascript:parent.yourFunctionName();"></iframe>

注意：如果是跨域场景，浏览器的同源策略会阻止这种调用，此时需要用postMessage通信。

2. 将函数注入到iframe的全局上下文 #

在主页面中，等待iframe加载完成后，把你的函数挂载到iframe的window对象上，这样伪协议里就能直接调用了：

// 主页面的JS代码
const iframe = document.querySelector('iframe');
iframe.onload = function() {
  // 将主页面的函数注入到iframe的全局作用域
  iframe.contentWindow.yourFunctionName = yourFunctionName;
};

之后iframe的伪协议就可以直接写：

<iframe src="javascript:yourFunctionName();"></iframe>

3. 避免使用JavaScript伪协议（推荐） #

其实现在官方已经不推荐使用JavaScript伪协议了，它存在安全性和可维护性问题。更优雅的方式是：

• 给iframe设置一个空白的src（比如src="about:blank"）
• 监听iframe的load事件，在主页面中直接调用函数，或者通过iframe.contentWindow执行逻辑
• 如果是跨域场景，使用postMessage进行主页面和iframe的通信

总结 #

本质就是上下文隔离的问题，只要搞清楚主页面和iframe各自的全局作用域，就能解决这个问题。优先推荐用更现代的方式替代伪协议，减少潜在的坑。

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