uniapp 的 webview组件在app端，怎么处理h5页面的window.open 和window.close

欢迎到专业群（ uni-app 官方技术交流群 1 ） 咨询，群中有相关专业的管理员和群友。

好的，这个问题在 uni-app 开发中很常见。App 端的 web-view 组件加载 H5 页面时，window.open 和 window.close 的行为确实和普通浏览器不太一样，需要特殊处理。

核心问题是：在 App 的 webview 环境中，每个 window.open 实际上可能会创建一个新的原生 webview 窗口，而在这个新窗口中调用 window.close，浏览器安全策略会限制它关闭由其他脚本打开的窗口，导致无法正常返回。

结合知识库和实际开发经验，这里提供几种可行的处理方案：

方案一：使用 uni.webView.js SDK 接管页面跳转（推荐）

如果这个 H5 页面你可以修改代码，那么最彻底的方案是使用 uni.webview.js 这个官方提供的桥接库，直接调用 uni-app 的页面路由来控制跳转和返回，而不是依赖 window.open 和 window.close。

1. 在 H5 页面中引入 uni.webview.js，最新版本链接为：https://gitcode.com/dcloud/uni-app/tree/uni-app-vue2-dev/dist/uni.webview.1.5.8.js
2. 将原来的 window.open 替换为 uni.webView.navigateTo，将 window.close 替换为 uni.webView.navigateBack。

示例代码如下：

// 确保在 UniAppJSBridgeReady 事件后调用  
document.addEventListener('UniAppJSBridgeReady', function() {  
    // 跳转到新页面，替代 window.open  
    uni.webView.navigateTo({  
        url: '/pages/newPage/newPage' // 你的 uni-app 页面路径  
    });  

    // 返回上一页，替代 window.close  
    uni.webView.navigateBack({  
        delta: 1  
    });  
});

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
特别注意：如果这个 H5 页面本身就是用 uni-app 编译出来的，直接引入 uni.webview.js 可能会因为命名冲突导致 uni.postMessage 等方法失效。根据社区开发者的经验，解决方法是本地化引入该 JS 文件，并修改其导出的方法名，例如在引入时重命名为 webUni 来避免冲突。

方案二：在 App 端使用 plus API 拦截并管理窗口

如果 H5 页面你无法修改代码（比如加载的是第三方网页），那么只能在 App 端通过 plus API 进行拦截和处理。核心思路是监听 webview 的新窗口创建事件，并管理这些窗口的生命周期。

1. 在 uni-app 页面中，获取到 web-view 组件的实例对象。
2. 监听 newWindow 事件，当 H5 调用 window.open 时会触发此事件。
3. 在事件回调中，阻止默认行为，然后使用 plus.webview.create 创建一个新的原生 webview 来加载目标 URL，并将其添加到当前页面。同时，可以在这个新窗口上绑定返回按钮事件来模拟 window.close 的效果。

示例代码（在 uni-app 的 vue 页面中编写）：

// 在 onReady 或 onLoad 中执行  
// #ifdef APP-PLUS  
let pages = getCurrentPages();  
let page = pages[pages.length - 1];  
let currentWebview = page.$getAppWebview();  
// 延时获取 web-view 组件对应的子 webview  
setTimeout(() => {  
    let wv = currentWebview.children()[0];  
    if (wv) {  
        // 监听新窗口创建事件  
        wv.addEventListener('newwindow', function(e) {  
            // 阻止默认的打开方式（例如系统浏览器）  
            e.preventDefault();  
            // 创建一个新的 webview 来加载目标 URL  
            let newWv = plus.webview.create(e.url, e.url, {  
                top: '0px',  
                bottom: '0px'  
            });  
            // 将新 webview 添加到当前页面  
            currentWebview.append(newWv);  
            // 模拟 window.close 的行为：监听原生返回键来关闭这个新 webview  
            newWv.addEventListener('close', function() {  
                newWv.close();  
            });  
            // 可选：在新 webview 上添加一个自定义的返回按钮，调用 newWv.close()  
        });  
    }  
}, 1000);  
// #endif

本助手使用国产模型，生成代码可能不准确。专业的代码生成需要全球顶尖的AI Coding模型。推荐使用uni-agent
这种方式的优点是无需修改 H5 代码，通过原生层接管了窗口管理。配合 onBackPress 事件和侧滑返回拦截，可以实现完整的返回逻辑。

方案三：使用原生插件

如果上述两种方案都不能满足你的复杂需求，还可以考虑使用封装好的原生 webview 插件。在 DCloud 插件市场搜索“webview”相关插件，例如 安卓原生webviewModule 这类插件，它们通常已经处理好了返回键监听、页面间跳转等细节，能更好地解决 window.open 和 window.close 的问题。

总结一下，如果 H5 可控，优选方案一；如果 H5 不可控，则采用方案二进行原生层拦截管理。如果问题依然无法解决，可以去 DCloud 插件市场搜索一下是否有更成熟的解决方案：https://ext.dcloud.net.cn/search。