如何在App中打开H5页面后，使用JavaScript实现页面关闭？

在移动应用开发中，经常会遇到需要在原生应用中打开一个H5页面，并且通过JavaScript与原生代码进行交互的情况，本文将详细介绍如何实现这一功能，包括如何在App中嵌入WebView、加载H5页面以及通过JavaScript调用原生方法来关闭H5页面。

1. 准备工作

工具与环境

Android Studio：用于开发Android应用。

Xcode：用于开发iOS应用。

React Native（可选）：如果使用React Native框架。

权限设置

确保你的应用有访问互联网的权限，以便能够加载外部的H5页面，对于Android，可以在AndroidManifest.xml中添加以下权限：

<uses-permission android:name="android.permission.INTERNET"/>

对于iOS，则不需要额外添加权限，但需确保Info.plist中的NSAppTransportSecurity配置允许HTTP流量。

2. 创建WebView

无论是Android还是iOS，都需要创建一个WebView组件来加载H5页面，以下是两个平台的基本示例：

Android

在你的Activity布局文件中添加WebView：

<WebView
    android:id="@+id/webview"
    android:layout_width="match_parent"
    android:layout_height="match_parent"/>

在Java或Kotlin代码中初始化WebView：

WebView webView = findViewById(R.id.webview);
webView.loadUrl("https://example.com");

iOS

在Storyboard中拖入一个WKWebView，或者在代码中创建一个：

let webView = WKWebView(frame: self.view.bounds)
self.view.addSubview(webView)
webView.load(URLRequest(url: URL(string: "https://example.com")!))

3. JavaScript与原生代码通信

为了从H5页面中通过JavaScript调用原生方法关闭页面，我们需要启用WebView的JavaScript接口，并定义相应的原生方法。

Android

在Activity中设置WebChromeClient和WebViewClient：

webView.setWebChromeClient(new WebChromeClient());
webView.setWebViewClient(new WebViewClient() {
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        webView.loadUrl("javascript:window.jsInterface = { closePage: function() { finish(); } }");
    }
});

然后在H5页面中，可以通过以下方式调用关闭方法：

<button onclick="window.jsInterface.closePage()">Close Page</button>

iOS

在ViewController中添加消息处理函数：

webView.uiDelegate = self
webView.navigationDelegate = self
webView.evaluateJavaScript("window.jsInterface = { closePage: () => { window.webkit.messageHandlers.closePage.postMessage(''); }}", completionHandler: nil)

然后实现WKScriptMessageHandler协议：

extension YourViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "closePage" {
            self.dismiss(animated: true, completion: nil)
        }
    }
}

在H5页面中同样使用按钮触发关闭：

<button onclick="window.webkit.messageHandlers.closePage.postMessage('')">Close Page</button>

4. 测试与调试

完成上述步骤后，你需要在不同的设备上进行测试，确保H5页面能够正确加载，并且JavaScript调用原生方法关闭页面的功能正常工作，注意检查日志输出以排查可能出现的错误或异常情况。

如何在App中打开H5页面后，使用JavaScript实现页面关闭？

发表回复