|
|
@@ -0,0 +1,266 @@
|
|
|
+<!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';
|
|
|
+ if (isIOS) return 'ios';
|
|
|
+ if (isHM) return 'HM';
|
|
|
+ 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>
|
sheshuangning
1 день тому
