webview js关闭页面

基础概念

WebView 是一种用于在应用程序中嵌入网页内容的组件。它允许应用程序通过浏览器引擎渲染网页，从而实现网页与原生应用的交互。JavaScript 是一种脚本语言，常用于网页开发中，可以实现动态交互效果。

类型

内嵌式 WebView：直接嵌入在应用界面中的 WebView。
全屏式 WebView：占据整个屏幕的 WebView，通常用于打开独立的网页页面。

应用场景

混合应用开发：使用 WebView 和原生代码结合的方式开发应用。
单页应用（SPA）：通过 WebView 加载和运行复杂的单页应用。
企业应用：在内部应用中嵌入特定的网页功能。

关闭 WebView 页面的方法

使用 JavaScript 关闭页面

在 WebView 中，可以通过 JavaScript 调用原生方法来关闭页面。以下是一些常见的方法：

Android

在 Android 中，可以通过 WebView 的 addJavascriptInterface 方法添加一个接口，供 JavaScript 调用：

// 在 Activity 中定义一个关闭页面的方法
public void closePage() {
    finish();
}

// 在 WebView 中添加 JavaScript 接口
webView.addJavascriptInterface(new Object() {
    @JavascriptInterface
    public void close() {
        closePage();
    }
}, "Android");

// 在网页中调用关闭方法
<button onclick="window.Android.close();">Close</button>

iOS

在 iOS 中，可以通过 WKWebView 的 evaluateJavaScript 方法执行 JavaScript 代码，并通过协议回调关闭页面：

// 定义一个协议
protocol WebViewDelegate: AnyObject {
    func closeWebView()
}

// 在 ViewController 中实现协议
class ViewController: UIViewController, WebViewDelegate {
    func closeWebView() {
        dismiss(animated: true, completion: nil)
    }
}

// 在 WKWebView 中设置代理
webView.navigationDelegate = self
webView.uiDelegate = self

// 在网页中调用关闭方法
<button onclick="window.webkit.messageHandlers.closeHandler.postMessage(null);">Close</button>

// 在 ViewController 中处理消息
extension ViewController: WKScriptMessageHandler {
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "closeHandler" {
            closeWebView()
        }
    }
}

遇到问题及解决方法

问题：WebView 页面无法关闭

原因：

JavaScript 接口未正确设置。
WebView 的生命周期管理不当。
权限或配置问题。

解决方法：

确保 JavaScript 接口已正确添加并注册。
检查 WebView 的生命周期方法，确保在适当的时候调用关闭方法。
确认应用有足够的权限，并检查相关配置是否正确。

示例代码

Android 示例

public class MainActivity extends AppCompatActivity {
    private WebView webView;

    @Override
    protected void onCreate(Bundle savedInstanceState) {
        super.onCreate(savedInstanceState);
        setContentView(R.layout.activity_main);

        webView = findViewById(R.id.webview);
        webView.getSettings().setJavaScriptEnabled(true);
        webView.addJavascriptInterface(new Object() {
            @JavascriptInterface
            public void close() {
                finish();
            }
        }, "Android");
        webView.loadUrl("https://example.com");
    }
}

iOS 示例

import UIKit
import WebKit

class ViewController: UIViewController, WKScriptMessageHandler {
    var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()

        let config = WKWebViewConfiguration()
        config.userContentController.add(self, name: "closeHandler")

        webView = WKWebView(frame: view.bounds, configuration: config)
        view.addSubview(webView)

        let url = URL(string: "https://example.com")!
        let request = URLRequest(url: url)
        webView.load(request)
    }

    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        if message.name == "closeHandler" {
            dismiss(animated: true, completion: nil)
        }
    }
}

通过以上方法和示例代码，可以实现 WebView 页面的关闭功能，并解决常见问题。