uniapp中this.$refs.webview.evaljs报错不是函数该如何解决

在uniapp中，我使用this.$refs.webview.evaljs方法时遇到了报错，提示"evaljs不是函数"。请问这是什么原因导致的？该如何解决？我已经确认webview组件已正确加载，且ref命名无误。是否需要在webview组件中额外配置什么？或者有其他替代方案可以实现相同功能？

2 回复

检查webview组件是否已正确挂载，确保this.$refs.webview存在。若使用条件渲染，需在mounted或nextTick中调用。


在uni-app中，this.$refs.webview.evalJS 报错“不是函数”，通常是因为webview组件尚未准备就绪或引用方式不正确。以下是解决方案：

1. 等待webview加载完成

在webview的@load事件触发后再调用evalJS，确保组件已就绪：

<webview ref="webview" @load="onWebviewLoad"></webview>

methods: {
  onWebviewLoad() {
    // 此时webview已加载完成
    this.$refs.webview.evalJS('javascript代码');
  }
}

2. 检查webview引用是否正确

  • 确保ref="webview"设置正确，且与this.$refs.webview一致。
  • 若webview嵌套在v-if中，可能因条件渲染导致引用为空，改用v-show或确保条件为真。

3. 平台兼容性处理

  • evalJS在H5端可能不支持，需添加平台判断：
// #ifdef APP-PLUS
this.$refs.webview.evalJS('代码');
// #endif

4. 错误捕获

添加try-catch避免崩溃：

try {
  this.$refs.webview.evalJS('代码');
} catch (e) {
  console.error('evalJS错误:', e);
}

常见原因总结：

  • 时机问题：未在webview加载完成后调用。
  • 平台限制：非App端不支持该API。
  • 引用丢失：动态渲染导致$refs为空。

按上述步骤排查即可解决问题。

回到顶部