在APP端 IOS下 webview引入的H5地址连接 H5链接里面有iframe标签 uni-app evalJS方法不执行

在APP端 IOS下 webview引入的H5地址连接 H5链接里面有iframe标签 uni-app evalJS方法不执行

示例代码：

APP 端

<!-- 页面结构 -->  
<view @click="handleDialog" style="font-size: 40px;">  
传参给H5  
</view>  
<web-view  
id="webViewId"  
src="http://192.168.2.71:8080/index.html"  
webview-styles="{ progress: false }"  
class="webview">  
</web-view>  

// APP调用方法传参到webview引用的H5  
// 方法实现  
handleDialog() {  
const webviewContext = uni.createWebviewContext('webViewId');  
if (webviewContext != null) {  
console.log("[METHOD1] 成功创建WebView上下文对象");  
console.log("[METHOD1] 开始执行JavaScript代码...")  
// 在WebView中执行我们构造的JavaScript代码  
webviewContext.evalJS('alert(999)');  
}

H5端
访问地址: http://192.168.2.71:8080/index.html

<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>Document</title>  
</head>  
<body>  
<iframe  
src="https://www.baidu.com/"  
id="888"  
sandbox="allow-scripts allow-same-origin"  
style="width: 100%; height: 500px"  
frameborder="0">  
</iframe>  
</body>  
</html>

操作步骤：

使用官方提供的项目 Hello uvue 或者任意 Unaipp x 框架
在index.uvue页面写 web-view 标签 src引入一个Html地址 同时增加一个方法获取到该 web-view 并同时执行 webviewContext.evalJS('alert(999)')

web-view 引入了 http://192.168.2.71:8080/index.html

这个html里面 引入了一个 iframe标签引入了谷歌地图

然后在ios 系统下 webviewContext.evalJS('alert(999)') IOS没有执行 安卓是可以的

预期结果：

Ios系统下 evalJS 方法执行

实际结果：

Ios下 evalJS 方法不执行

bug描述：

使用官方提供的项目 Hello uvue 或者任意 Unaipp x 框架
在index.uvue页面写 web-view 标签 src引入一个Html地址 同时增加一个方法获取到该 web-view 并同时执行 webviewContext.evalJS('alert(999)')

web-view 引入了 http://192.168.2.71:8080/index.html

这个html里面 引入了一个 iframe标签引入了谷歌地图

然后在ios 系统下 webviewContext.evalJS('alert(999)') 没有执行 安卓是可以的

注意：
经过我的测试 iframe标签里面设置 baidu.com 等待大约30 - 60s 该方法是可执行的

如果引入谷歌地图 会一直不执行

示例图片


更多关于在APP端 IOS下 webview引入的H5地址连接 H5链接里面有iframe标签 uni-app evalJS方法不执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html

1 回复

更多关于在APP端 IOS下 webview引入的H5地址连接 H5链接里面有iframe标签 uni-app evalJS方法不执行的实战教程也可以访问 https://www.itying.com/category-93-b0.html


这是一个典型的iOS WebView跨域安全限制问题。在iOS系统中，当WebView内嵌了跨域iframe时，evalJS方法的执行会受到严格限制。

问题核心在于：iOS的WKWebView对跨域iframe中的JavaScript执行有更强的安全策略。当iframe加载外部域名（如百度、谷歌地图）时，主页面与iframe属于不同源，iOS会阻止evalJS方法直接注入和执行脚本。

解决方案：

  1. 使用postMessage通信：在H5页面中添加消息监听，通过postMessage与iframe进行安全通信。
// 在H5页面中添加
window.addEventListener('message', function(event) {
    if (event.data.type === 'evalJS') {
        eval(event.data.code);
    }
});

// uni-app端修改为
webviewContext.evalJS(`
    window.postMessage({
        type: 'evalJS', 
        code: 'alert(999)'
    }, '*');
`);
  1. 延迟执行策略：在iframe加载完成后再执行evalJS
// 等待iframe加载
setTimeout(() => {
    webviewContext.evalJS('alert(999)');
}, 1000);
  1. 检查WebView准备状态：确保WebView完全加载后再执行脚本
handleDialog() {
    const webview = this.$scope.$getAppWebview();
    const currentWebview = webview.children()[0];
    currentWebview.addEventListener('loaded', () => {
        const webviewContext = uni.createWebviewContext('webViewId');
        webviewContext.evalJS('alert(999)');
    });
}
回到顶部