sheshuangning
/
elc24_androidapp


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272
							<!DOCTYPE html>
<html lang="zh-CN">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>原生方法调用示例</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <style>
        html {
            background-color: #00f5f500;
        }

        head {
            background-color: #00f5f500;
        }

        .btn {
            background: #4285f4;
            color: white;
            border: none;
            padding: 12px 20px;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            width: 100%;
            margin: 10px 0;
            transition: background 0.3s;
        }


        .device-badge {
            animation: pulse 2s infinite;
        }

        @keyframes pulse {
            0% {
                opacity: 1;
            }

            50% {
                opacity: 0.7;
            }

            100% {
                opacity: 1;
            }
        }

        .fade-in {
            animation: fadeIn 0.5s ease-in;
        }

        @keyframes fadeIn {
            from {
                opacity: 0;
                transform: translateY(10px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
    </style>
</head>

<body>

    <div class="bg-white rounded-2xl shadow-xl p-8">
        <!-- 按钮组 -->
        <div class="space-y-4">
            <!-- 关闭WebView按钮 -->
            <button id="closeBtn" class="btn">
                <i class="fas fa-times-circle"></i>
                关闭WebView
            </button>

            <!-- 跳转Termination Activity按钮 -->
            <button id="terminationBtn" class="btn">
                <i class="fas fa-external-link-alt"></i>
                跳转服务解约页面
            </button>
        </div>

        <!-- 功能说明 -->
        <div class="mt-6 p-4 bg-gray-50 rounded-lg">
            <h3 class="font-semibold text-gray-700 mb-2">功能说明</h3>
            <ul class="text-sm text-gray-600 space-y-1">
                <li>• 自动检测Android/iOS/HM设备</li>
                <li>• 调用相应的原生关闭方法</li>
                <li>• 调用跳转终止页面方法</li>
                <li>• 实时状态反馈</li>
            </ul>
        </div>
    </div>
    <script>
        class DeviceDetector {
            constructor() {
                this.deviceType = this.detectDevice();
                this.displayDeviceInfo();
            }

            detectDevice() {
                const u = navigator.userAgent;
                const isAndroid = u.indexOf('Android') > -1 || u.indexOf('Linux') > -1;
                const isIOS = /\(i[^;]+;( U;)? CPU.+Mac OS X/.test(u);
                const match = u.match(/OpenHarmony (\d+\.?\d*)/)
                const isHM = (match?.length && Number(match[1]) >= 5)

                if (isAndroid) {
                    return 'android';
                } else if (isIOS) {
                    return 'ios';
                } else if (isHM) {
                    return 'HM';
                } else {
                    return 'unknown';
                }
            }

            displayDeviceInfo() {
                const deviceInfoEl = document.getElementById('deviceInfo');
                let badgeClass = '';
                let deviceText = '';

                switch (this.deviceType) {
                    case 'android':
                        badgeClass = 'bg-green-100 text-green-800';
                        deviceText = 'Android 设备';
                        break;
                    case 'ios':
                        badgeClass = 'bg-blue-100 text-blue-800';
                        deviceText = 'iOS 设备';
                        break;
                    case 'HM':
                        badgeClass = 'bg-blue-100 text-blue-800';
                        deviceText = 'HM 设备';
                        break;
                    default:
                        badgeClass = 'bg-gray-100 text-gray-800';
                        deviceText = '未知设备';
                }
                console.log(deviceText)
            }

            callNativeCloseMethod() {
                let success = false;
                let message = '';

                try {
                    switch (this.deviceType) {
                        case 'android':
                            if (typeof window.android !== 'undefined' &&
                                typeof window.android.jsCLoseWebView === 'function') {
                                window.android.jsCLoseWebView();
                                success = true;
                                message = '成功调用 Android 原生关闭方法';
                            } else {
                                message = 'Android 原生方法不可用';
                            }
                            break;
                        case 'ios':
                            if (window.webkit &&
                                window.webkit.messageHandlers &&
                                window.webkit.messageHandlers.jsCLoseWebView) {
                                window.webkit.messageHandlers.jsCLoseWebView.postMessage({});
                                success = true;
                                message = '成功调用 iOS 原生关闭方法';
                            } else {
                                message = 'iOS 原生方法不可用';
                            }
                            break;
                        case 'HM':
                            // if (typeof window.OpenHarmony !== 'undefined' &&
                            //     window.OpenHarmony.jsCLoseWebView) {
                            window.OpenHarmony.jsCLoseWebView();
                            success = true;
                            message = '成功调用 HM 原生关闭方法';
                            // } else {
                            //     message = 'HM 原生方法不可用';
                            // }
                            break;
                        default:
                            message = '未知设备类型，无法调用原生方法';
                    }
                } catch (error) {
                    message = `调用原生方法时出错: ${error.message}`;
                }

                console.log(message)

                return success;
            }

            callTerminationActivity() {
                let success = false;
                let message = '';

                try {
                    switch (this.deviceType) {
                        case 'android':
                            if (typeof window.android !== 'undefined' &&
                                typeof window.android.jsToTerminationActivity === 'function') {
                                window.android.jsToTerminationActivity();
                                success = true;
                                message = '成功调用 Android 跳转终止页面方法';
                            } else {
                                message = 'Android 跳转终止页面方法不可用';
                            }
                            break;
                        case 'ios':
                            if (window.webkit &&
                                window.webkit.messageHandlers &&
                                window.webkit.messageHandlers.jsToTerminationActivity) {
                                window.webkit.messageHandlers.jsToTerminationActivity.postMessage({});
                                success = true;
                                message = '成功调用 iOS 跳转终止页面方法';
                            } else {
                                message = 'iOS 跳转终止页面方法不可用';
                            }
                            break;
                        case 'HM':
                            // if (typeof window.OpenHarmony !== 'undefined' && window.OpenHarmony.jsCLoseWebView) {
                            window.OpenHarmony.jsToTerminationActivity();
                            success = true;
                            message = '成功调用 HM 跳转终止页面方法';
                            // } else {
                            //     message = 'HM 跳转终止页面方法不可用';
                            // }
                            break;
                        default:
                            message = '未知设备类型，无法调用跳转方法';
                    }
                } catch (error) {
                    message = `调用跳转方法时出错: ${error.message}`;
                }
                console.log(message)

                return success;
            }
        }

        // 页面加载完成后初始化
        document.addEventListener('DOMContentLoaded', function () {
            const detector = new DeviceDetector();
            const closeBtn = document.getElementById('closeBtn');
            const terminationBtn = document.getElementById('terminationBtn');

            closeBtn.addEventListener('click', function () {
                detector.callNativeCloseMethod();
            });

            terminationBtn.addEventListener('click', function () {
                detector.callTerminationActivity();
            });

            // 添加键盘快捷键支持
            document.addEventListener('keydown', function (e) {
                if (e.key === 'Escape') {
                    detector.callNativeCloseMethod();
                } else if (e.key === 't' || e.key === 'T') {
                    detector.callTerminationActivity();
                }
            });
        });
    </script>
</body>

</html>
<code_end>