uni-app swiper 内web-view 调用evalJs 失败，this.$refs.webview.evalJs is not a function

测试过的手机

华为Novaz, iOS 模拟器

示例代码

<swiper>  
    <swiper-item>  
           <text>演示，非真实代码</text>  
        </swiper-item>  
         <swiper-item>    
                        <web-view ref="webview" :style="{width:'750rpx',height:mainHeight}" :src="nav.apiUrl" :webview-styles="webviewStyles" @message="onWebviewPostMessage" @onPostMessage="onWebviewPostMessage"></web-view>  

    </swiper-item>  
</swiper>  

this.$refs.webview.evalJs("document.body.style.background ='#00FF00'");

操作步骤

在一个nvue 页面里swiper 里面放一个web-view，使用ref 来调用evalJs

预期结果

成功执行evalJs

实际结果

this.$refs.webview.evalJs is not a function

bug描述

swiper 内web-view 调用evalJs 失败，显示：this.$refs.webview.evalJs is not a function，其它场景可以正常调用

相关链接

https://ask.dcloud.net.cn/question/181586

caililin 1楼•9 天前

复制我的去调试看看
onReady() {
var currentWebview = this.$scope.$getAppWebview(); //获取当前页面的webview对象,此对象相当于html5plus里的plus.webview.currentWebview()
setTimeout(function() {
let webview = currentWebview.children()[0];
webview.evalJS(alert(123));
}, 5000); //如果是页面初始化调用时，需要延时一下
},

zlyuanteng 2楼•9 天前

在 uni-app 中使用 swiper 组件嵌套 web-view 组件时，调用 evalJs 方法失败，提示 this.$refs.webview.evalJs is not a function，可能是由于以下几个原因导致的：

1. `web-view` 组件未正确引用

确保你在 web-view 组件上正确设置了 ref 属性，并且在 swiper 组件中正确引用了 web-view。

<template>
  <swiper>
    <swiper-item>
      <web-view ref="webview" :src="webViewUrl"></web-view>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      webViewUrl: 'https://example.com'
    };
  },
  methods: {
    evalJsInWebView() {
      this.$refs.webview.evalJs('alert("Hello from uni-app!");');
    }
  }
};
</script>

2. `web-view` 组件未加载完成

web-view 组件需要加载完成后才能调用 evalJs 方法。你可以在 web-view 的 @load 事件中确保页面加载完成后再调用 evalJs。

<template>
  <swiper>
    <swiper-item>
      <web-view ref="webview" :src="webViewUrl" @load="onWebViewLoad"></web-view>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      webViewUrl: 'https://example.com'
    };
  },
  methods: {
    onWebViewLoad() {
      this.$refs.webview.evalJs('alert("Hello from uni-app!");');
    }
  }
};
</script>

3. `swiper` 组件导致的问题

swiper 组件可能会导致 web-view 组件的引用问题。你可以尝试在 swiper 的 @change 事件中重新获取 web-view 的引用。

<template>
  <swiper @change="onSwiperChange">
    <swiper-item>
      <web-view ref="webview" :src="webViewUrl" @load="onWebViewLoad"></web-view>
    </swiper-item>
  </swiper>
</template>

<script>
export default {
  data() {
    return {
      webViewUrl: 'https://example.com'
    };
  },
  methods: {
    onSwiperChange() {
      this.$nextTick(() => {
        this.$refs.webview.evalJs('alert("Hello from uni-app!");');
      });
    },
    onWebViewLoad() {
      this.$refs.webview.evalJs('alert("Hello from uni-app!");');
    }
  }
};
</script>

4. `web-view` 组件的兼容性问题

某些平台可能对 web-view 组件的支持不完全，导致 evalJs 方法不可用。你可以检查目标平台的文档，确认 web-view 组件是否支持 evalJs 方法。

5. `web-view` 组件的版本问题

确保你使用的 uni-app 版本是最新的，因为旧版本可能存在一些 bug 或兼容性问题。

6. 使用 `uni.webView.evalJS`

如果 this.$refs.webview.evalJs 不可用，你可以尝试使用 uni.webView.evalJS 方法。

uni.webView.evalJS('alert("Hello from uni-app!");');