如何检测App WebView内亚马逊网页Buy Now按钮的点击并弹出Toast？

1. 核心逻辑 #

通过WebView注入JavaScript代码，监听亚马逊页面中「Buy Now」按钮的点击事件，触发时调用原生App提供的接口显示Toast提示。核心是利用WebView的JS桥接能力，实现网页与原生的交互。

2. 具体实现（分Android、iOS两大平台） #

Android 平台 #

步骤1：配置WebView开启JS交互

先开启WebView的JavaScript支持，并注册原生方法供JS调用：

WebView webView = findViewById(R.id.webview);
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);

// 注册JS调用的原生接口，"AndroidToast"是JS中要访问的对象名
webView.addJavascriptInterface(new Object() {
    // 必须添加@JavascriptInterface注解，Android 4.2+才能正常调用
    @JavascriptInterface
    public void showToast(String msg) {
        Toast.makeText(getApplicationContext(), msg, Toast.LENGTH_SHORT).show();
    }
}, "AndroidToast");

步骤2：页面加载完成后注入监听JS

在WebView的页面加载完成回调中，注入JS监听按钮点击：

webView.setWebViewClient(new WebViewClient() {
    @Override
    public void onPageFinished(WebView view, String url) {
        super.onPageFinished(view, url);
        // 匹配亚马逊Buy Now按钮的常见id/class，覆盖不同页面的按钮
        String jsCode = "document.querySelectorAll('[id*=\"buy-now-button\"], [class*=\"buy-now\"]').forEach(btn => {" +
                        "  btn.addEventListener('click', () => AndroidToast.showToast('您点击了Buy Now按钮'));" +
                        "});";
        webView.evaluateJavascript(jsCode, null);
    }
});

iOS 平台 #

步骤1：配置WKWebView的JS消息通道

使用WKWebView，设置消息处理器接收JS的触发信号：

import WebKit

class AmazonWebVC: UIViewController, WKScriptMessageHandler {
    private var webView: WKWebView!

    override func viewDidLoad() {
        super.viewDidLoad()
        let config = WKWebViewConfiguration()
        // 注册消息通道，JS通过"showToast"名称发送消息
        config.userContentController.add(self, name: "showToast")
        
        webView = WKWebView(frame: view.bounds, configuration: config)
        webView.navigationDelegate = self
        view.addSubview(webView)
        
        // 加载亚马逊官网
        if let url = URL(string: "https://www.amazon.com") {
            webView.load(URLRequest(url: url))
        }
    }

    // 接收JS消息并显示Toast（iOS无原生Toast，用弹窗模拟）
    func userContentController(_ userContentController: WKUserContentController, didReceive message: WKScriptMessage) {
        guard message.name == "showToast", let msg = message.body as? String else { return }
        let toast = UIAlertController(title: nil, message: msg, preferredStyle: .alert)
        present(toast, animated: true)
        DispatchQueue.main.asyncAfter(deadline: .now() + 1.5) {
            toast.dismiss(animated: true)
        }
    }
}

步骤2：页面加载完成后注入监听JS

通过WKNavigationDelegate的回调注入JS：

extension AmazonWebVC: WKNavigationDelegate {
    func webView(_ webView: WKWebView, didFinish navigation: WKNavigation!) {
        let jsCode = "document.querySelectorAll('[id*=\"buy-now-button\"], [class*=\"buy-now\"]').forEach(btn => {" +
                    "  btn.addEventListener('click', () => window.webkit.messageHandlers.showToast.postMessage('您点击了Buy Now按钮'));" +
                    "});"
        webView.evaluateJavaScript(jsCode, completionHandler: nil)
    }
}

3. 关键注意事项 #

• 按钮选择器适配：亚马逊页面可能更新按钮的id/class，可通过浏览器开发者工具查看当前按钮属性，调整querySelectorAll的匹配规则。
• 动态内容处理：如果页面是AJAX动态加载商品，需用MutationObserver监听DOM变化，自动为新出现的按钮绑定点击事件。
• 安全问题：Android中避免通过addJavascriptInterface暴露敏感原生方法；iOS的WKWebView消息机制安全性更高。

内容的提问来源于stack exchange，提问作者Rishi Raj Dixit