【报Bug】NVUE 下 webview 的evalJs 方法无效

分类：uni-app

bug反馈

产品分类： uniapp/App

PC开发环境操作系统： Mac

PC开发环境操作系统版本号： 14.0 (23A344)

HBuilderX类型：正式

HBuilderX版本号： 3.96

手机系统： Android

手机系统版本号： Android 12

手机厂商：华为

手机机型： nova

页面类型： nvue

vue版本： vue2

打包方式：云端

项目创建方式： HBuilderX

示例代码：

没有什么特别的代码，就是 NVUE 下 webview 的evalJs方法显示不存在。

操作步骤：

NVUE 下创建一个webview指向远程或者本地的

预期结果：

调用evalJs，如：this.$refs.webview.evalJs("document.body.style.background ='#00FF00'");

实际结果：

webview.evalJs is not a function

bug描述：

NVUE 页面下 webview 的evalJs 方法无效（纯vue没试过），显示：webview.evalJs is not a function ，打印webview 是有信息的：

[  
    {  
        "ref": "2521",  
        "type": "u-web-view",  
        "attr": {  
            "src": "https://www.xxx.com/xxx/",  
            "webviewStyles": {  
                "progress": {  
                    "color": "#e42417"  
                }  
            }  
        },  
        "style": {  
            "width": "375",  
            "height": 508  
        },  
        "event": [  
            "message",  
            "onPostMessage"  
        ]  
    }  
]

安卓华为真机调试运行和iOS 模拟器都一样，试了远程和本地页面都一样抱错。我记得原来是可以的，但是不知道从哪个版本开始出的问题。

P.S. 网页向app PostMessage 可以成功收到

2023-11-15 11:09 负责人:无分享

6 个回复

喜欢技术的前端 - QQ---445849201

刚试了，可以，可能是修改的网址改了 background 体现不出来

<template>  
    <view>  
        <web-view ref="webview" class="webview" src="https://uniapp.dcloud.net.cn/" @onPostMessage="handlePostMessage"></web-view>  
        <button class="button" @click="evalJs">evalJs(改变webview背景颜色)</button>  
    </view>  
</template>  
<script>  
   export default {  
        data() {  
            return {  

            }  
        },  
        methods: {  
            // webview向外部发送消息  
            handlePostMessage: function(data) {  
                console.log("接收到消息：" + JSON.stringify(data.detail));  
            },  
            // 调用 webview 内部逻辑  
            evalJs: function() {  
                console.log(this.$refs.webview)  
                this.$refs.webview.evalJs(`document.body.style.background ='#00FF00'`);   
                // this.$refs.webview.evalJs("document.body.style.background ='#00FF00'");  
            }  
        }  
    }  
</script>  
<style>  
    .webview{  
        width: 375px;  
        height: 500px;  
    }  
</style>

sin2x (作者)

我这边不是背景没变，而是调用显示：webview.evalJs is not a function

2023-11-16 02:51
5***@qq.com

回复 sin2x:请问这个问题解决了吗

2023-12-06 18:28
sin2x (作者)

回复 5***@qq.com: 没有，具体的问题定位：明确了webview 在swiper item里面的时候出现该问题

2023-12-11 10:56
愚者

回复 sin2x: 解决了没

2024-03-28 15:06

sin2x (作者)

更新： 只有在动态显示/创建/隐藏的webview 的时候才会出现这样的状况，一直固定显示的webview 不会，this.$refs.webview 一直都有对象，不是undefined, 就是调用不了evalJs .


<web-view v-if="showWeb" ref="webview" :style="{width:'690rpx',height:'80px'}" class="gui-padding gui-margin-top" src="/hybrid/html/vthumb.html" :webview-styles="webviewStyles" @onPostMessage="onVthumbMessage"></web-view>