通过plus创建的子webview访问的网页无法调用uni-app的api

通过plus创建的子webview访问的网页无法调用uni-app的api

uniapp通过web-view访问的远程网页是可以通过引入uni.webview.js来使用api与应用内的页面交互，比如跳转app内的页面和postMessage。但在测试中发现直接使用<webview>组件访问这些网页没问题， 如果是通过下面的代码创建的子webview访问网页就失效了。

但是为了安全阻止远程网页使用plus的api, 又不得不使用plus创建子webview, 请教各位大佬有什么解决办法？

// #ifdef APP-PLUS  
wv = plus.webview.create("","custom-webview",{  
    plusrequire:"none", //禁止远程网页使用plus的API，有些使用mui制作的网页可能会监听plus.key，造成关闭页面混乱，可以通过这种方式禁止  
    'uni-app': 'none', //不加载uni-app渲染层框架，避免样式冲突  
    top:uni.getSystemInfoSync().statusBarHeight+44 //放置在titleNView下方。如果还想在webview上方加个地址栏的什么的，可以继续降低TOP值  
})  
wv.loadURL("https://www.baidu.com")  
var currentWebview = this.$scope.$getAppWebview(); //此对象相当于html5plus里的plus.webview.currentWebview()。在uni-app里vue页面直接使用plus.webview.currentWebview()无效，非v3编译模式使用this.$mp.page.$getAppWebview()  
currentWebview.append(wv);//一定要append到当前的页面里！！！才能跟随当前的页面一起做动画，一起关闭  
setTimeout(function() {  
    console.log(wv.getStyle())  
}, 1000);//如果是首页的onload调用时需要延时一下，二级页面无需延时，可直接获取  
// #endif

更多关于通过plus创建的子webview访问的网页无法调用uni-app的api的实战教程也可以访问 https://www.itying.com/category-93-b0.html

3 回复

请问你有办法解决吗

更多关于通过plus创建的子webview访问的网页无法调用uni-app的api的实战教程也可以访问 https://www.itying.com/category-93-b0.html


没有办法，要使用uni的api必须启用plus

在通过plus.webview.create创建的子Webview中，远程网页默认无法调用uni-app的API，这是因为设置了plusrequire:"none"和'uni-app': 'none'，禁用了相关框架注入。虽然这增强了安全性，但确实阻断了与uni-app的交互能力。

要解决此问题，可以采取以下方法：

  1. 通过URL参数或PostMessage传递数据：在创建Webview时，可以通过URL传递初始参数（如https://www.baidu.com?token=xxx）。同时，子Webview中的网页可通过window.postMessage向父页面发送消息，父页面通过监听message事件接收并处理（例如调用uni-app API实现页面跳转）。需注意，这种方式需要父子页面协同编码。

  2. 使用自定义JavaScript桥接：在子Webview中注入自定义脚本（通过evalJS方法），在网页中暴露一个全局对象（如uniBridge），通过它间接调用父页面的方法。例如：

    wv.evalJS(`window.uniBridge = { postMessage: function(data) { ... } }`);
回到顶部