uniapp webview.evaljs如何使用

我想在uniapp中使用webview.evaljs方法，但不太清楚具体怎么操作。能否详细说明一下evaljs的使用方法？比如如何传递参数、获取返回值，以及在什么场景下使用比较合适？另外，这个方法在安卓和iOS上有没有兼容性问题需要注意？

2 回复

webview.evalJS用于在Uniapp的Webview组件中执行JavaScript代码。使用方法：

// 获取webview对象
const wv = this.$scope.$getAppWebview().children()[0]

// 执行JS代码
wv.evalJS("alert('Hello')")

注意：需确保Webview已加载完成，否则可能执行失败。


在 UniApp 中，webview.evalJS 方法用于在 Webview 组件中执行 JavaScript 代码。它允许原生页面与嵌入的网页进行交互，例如调用网页中的函数或获取数据。

使用方法

  1. 获取 Webview 组件引用：通过 ref 属性或 $mp.page 获取 Webview 实例。
  2. 调用 evalJS 方法：传入要执行的 JavaScript 字符串。

示例代码

  1. 在 Vue 页面中：

    <template>
  <view>
    <webview ref="webview" src="https://example.com" @message="onMessage"></webview>
    <button @click="runJS">执行 JS</button>
  </view>
</template>

<script>
export default {
  methods: {
    runJS() {
      // 通过 ref 获取 Webview 组件并调用 evalJS
      this.$refs.webview.evalJS('alert("Hello from UniApp!")');
    },
    onMessage(e) {
      console.log('收到 Webview 消息:', e.detail.data);
    }
  }
}
</script>

  2. 通过页面实例获取（适用于非 Vue 组件环境）：

    // 获取当前页面栈中的 Webview
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
const webview = currentPage.$vm.$refs.webview; // 假设 ref 为 'webview'
webview.evalJS('document.title = "新标题"');

注意事项

  • 作用域：执行的 JS 在 Webview 的页面上下文中运行。
  • 通信：可通过 uni.postMessage 在 Webview 内向 UniApp 发送数据（需监听 @message 事件）。
  • 安全性：避免执行不可信代码，防止 XSS 风险。
  • 兼容性：确保 Webview 页面已加载完成（可在 @load 事件后调用）。

通过 evalJS 可实现丰富的混合开发功能，如数据传递或动态修改网页内容。

回到顶部