iPhone端Instagram内置浏览器_AutofillCallbackHandler变量报错

• 复现边界：仅iPhone端Instagram应用内置浏览器环境可稳定触发，安卓设备、各类独立浏览器、其他App内置浏览器均无同类异常
• 抛出的固定错误：Can't find variable: _AutofillCallbackHandler

该错误属于Instagram iOS端内置浏览器自身的环境缺陷，和站点业务代码无直接关联：
Instagram iOS端的内置WebView基于WKWebView封装，会向页面注入自动填充能力相关的脚本，脚本逻辑依赖全局对象_AutofillCallbackHandler处理表单自动填充的回调事件；但部分页面加载场景下，注入脚本存在执行时序问题，调用该对象的逻辑先于对象本身的初始化逻辑执行，直接触发了未定义变量的报错。

在页面所有业务脚本执行前做全局变量兜底即可，该方案无环境副作用，不会影响Instagram原有自动填充能力的正常运行，也不会干扰其他浏览器环境的页面逻辑：

1. 将以下兜底代码放在页面<head>标签内的最靠前位置，确保其优先于页面内所有其他脚本执行：

if (typeof window._AutofillCallbackHandler === 'undefined') {
  // 空占位实现，后续Instagram注入真实对象时会自动覆盖
  window._AutofillCallbackHandler = new Proxy({}, {
    get: () => () => {}
  })
}

若不想用Proxy，也可以手动补全常见的回调方法空实现，覆盖onAutofill、onInputFocus、onInputBlur这几个Instagram常用的回调方法即可，效果完全一致。

2. 修复后可在iPhone端Instagram内复测验证，报错会直接消失，页面原有表单交互、自动填充功能均不会受影响。

内容的提问来源于stack exchange，提问作者Hassan Ali Shahzad