H5 App实战进阶十五：H5 App与原生应用的交互

<!-- H5页面代码 -->
<button onclick="openNativeApp()">Open Native App</button>
 
<script>
function openNativeApp() {
    // 假设原生应用定义了myapp://openFeature作为触发特定功能的URL
    window.location.href = 'myapp://openFeature';
}
</script>

// 在Activity中重写shouldOverrideUrlLoading方法
@Override
public boolean shouldOverrideUrlLoading(WebView view, String url) {
    if (url.startsWith("myapp://")) {
        // 处理URL Scheme
        if (url.equals("myapp://openFeature")) {
            // 打开特定功能
            openFeature();
            return true; // 表示已经处理该URL，不需要继续加载
        }
    }
    return super.shouldOverrideUrlLoading(view, url);
}

// 在UIWebView的代理方法中处理URL Scheme
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSURL *url = request.URL;
    if ([url.scheme isEqualToString:@"myapp"]) {
        if ([url.host isEqualToString:@"openFeature"]) {
            // 打开特定功能
            [self openFeature];
            return NO; // 表示已经处理该URL，不需要继续加载
        }
    }
    return YES; // 表示继续加载其他URL
}

webView.addJavascriptInterface(new NativeBridge(this), "NativeBridge");
 
// NativeBridge类定义
public class NativeBridge {
    Context mContext;
 
    NativeBridge(Context context) {
        mContext = context;
    }
 
    @JavascriptInterface
    public void showToast(String message) {
        Toast.makeText(mContext, message, Toast.LENGTH_SHORT).show();
    }
}

// 在WebView加载完成后注入JavaScript对象
[webView stringByEvaluatingJavaScriptFromString:@"window.NativeBridge = { showToast: function(message) { window.location = 'nativebridge://showToast?message=' + encodeURIComponent(message); } }"];
 
// 监听URL Scheme并处理
- (BOOL)webView:(UIWebView *)webView shouldStartLoadWithRequest:(NSURLRequest *)request navigationType:(UIWebViewNavigationType)navigationType {
    NSURL *url = request.URL;
    if ([url.scheme isEqualToString:@"nativebridge"]) {
        if ([url.host isEqualToString:@"showToast"]) {
            NSString *message = [url.query componentsSeparatedByString:@"="][1];
            message = [message stringByReplacingPercentEscapesUsingEncoding:NSUTF8StringEncoding];
            // 显示Toast
            [self showToast:message];
            return NO; // 表示已经处理该URL，不需要继续加载
        }
    }
    return YES; // 表示继续加载其他URL
}
 
// 显示Toast的方法
- (void)showToast:(NSString *)message {
    UIAlertView *alert = [[UIAlertView alloc] initWithTitle:@"Toast" message:message delegate:nil cancelButtonTitle:@"OK" otherButtonTitles:nil];
    [alert show];
}

<!-- H5页面代码 -->
<button onclick="showNativeToast()">Show Native Toast</button>
 
<script>
function showNativeToast() {
    // 调用原生方法显示Toast
    window.NativeBridge.showToast('Hello from H5!');
}
</script>

webView.setWebViewClient(new WebViewClient() {
    @Override
    public boolean shouldOverrideUrlLoading(WebView view, WebResourceRequest request) {
        // 处理其他URL Scheme
        return super.shouldOverrideUrlLoading(view, request);
    }
 
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 监听message事件
        view.evaluateJavascript("(function() { " +
                "var eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';" +
                "var eventer = window[eventMethod];" +
                "var messageEvent = eventMethod == 'attachEvent' ? 'onmessage' : 'message';" +
                "eventer(messageEvent, function(e) {" +
                "android.WebViewJavascriptBridge.handleJavascriptMessage(JSON.stringify(e.data));" +
                "}, false);" +
                "})()", null);
    }
});
 
// 处理JavaScript消息的方法
public void handleJavascriptMessage(String message) {
    // 解析并处理消息
    // ...
}

<!-- H5页面代码 -->
<button onclick="sendMessageToNative()">Send Message to Native</button>
 
<script>
function sendMessageToNative() {
    // 发送消息给原生应用
    if (window.webkit && window.webkit.messageHandlers && window.webkit.messageHandlers.handleMessage) {
        window.webkit.messageHandlers.handleMessage.postMessage('Hello from H5!');
    } else if (window.android && window.android.WebViewJavascriptBridge) {
        // Android特定处理（如果使用WebViewJavascriptBridge库）
        window.android.WebViewJavascriptBridge.send(
            JSON.stringify({ handler: 'handleMessage', data: 'Hello from H5!' })
        );
    } else {
        console.error('No message handler available');
    }
}
</script>