如何在已加载网站的WebView中添加类似示例应用的自定义图标？

根据你提到的示例效果，以下分原生容器层和网页内容层两种场景给出具体实现方案：

一、在WebView的原生容器添加自定义图标（悬浮/工具栏按钮） #

Android 实现 #

1. 调整布局，将WebView与自定义图标控件放在同一父布局：

<RelativeLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:layout_width="match_parent"
    android:layout_height="match_parent">

    <WebView
        android:id="@+id/webView"
        android:layout_width="match_parent"
        android:layout_height="match_parent" />

    <!-- 自定义悬浮图标 -->
    <ImageView
        android:id="@+id/customFloatIcon"
        android:layout_width="50dp"
        android:layout_height="50dp"
        android:layout_alignParentBottom="true"
        android:layout_alignParentEnd="true"
        android:layout_margin="16dp"
        android:src="@drawable/your_custom_icon"
        android:clickable="true"
        android:background="?attr/selectableItemBackgroundBorderless" />
</RelativeLayout>

2. 在代码中绑定交互逻辑：

WebView webView = findViewById(R.id.webView);
ImageView floatIcon = findViewById(R.id.customFloatIcon);

// 配置WebView支持JS（需交互时开启）
WebSettings webSettings = webView.getSettings();
webSettings.setJavaScriptEnabled(true);

// 图标点击事件
floatIcon.setOnClickListener(v -> {
    // 示例1：调用网页中的JS方法
    webView.evaluateJavascript("javascript:triggerWebAction()", null);
    // 示例2：执行原生操作，比如刷新WebView
    // webView.reload();
});

iOS 实现 #

1. 在ViewController中添加WKWebView和自定义图标按钮：

import UIKit
import WebKit

class WebVC: UIViewController {
    private var webView: WKWebView!
    private var customIconBtn: UIButton!

    override func viewDidLoad() {
        super.viewDidLoad()
        setupWebView()
        setupCustomIcon()
    }

    private func setupWebView() {
        webView = WKWebView(frame: view.bounds)
        view.addSubview(webView)
        // 加载目标网页
        if let url = URL(string: "https://your-target-url.com") {
            webView.load(URLRequest(url: url))
        }
    }

    private func setupCustomIcon() {
        customIconBtn = UIButton(type: .custom)
        customIconBtn.setImage(UIImage(named: "your_custom_icon"), for: .normal)
        // 设置悬浮位置
        customIconBtn.frame = CGRect(x: view.bounds.width - 70, y: view.bounds.height - 120, width: 50, height: 50)
        customIconBtn.addTarget(self, action: #selector(iconTapped), for: .touchUpInside)
        view.addSubview(customIconBtn)
        // 确保图标在WebView上层
        view.bringSubviewToFront(customIconBtn)
    }

    @objc private func iconTapped() {
        // 调用网页JS方法
        webView.evaluateJavaScript("triggerWebAction()") { result, error in
            if let error = error {
                print("JS调用失败：\(error.localizedDescription)")
            }
        }
        // 或执行原生刷新
        // webView.reload()
    }
}

二、在WebView加载的网页内添加自定义悬浮图标 #

如果图标是网页内容的一部分，直接通过前端代码实现：

1. HTML结构：

<div class="float-icon-container">
    <img src="your-icon.png" alt="自定义图标" id="webFloatIcon">
</div>

2. CSS悬浮样式：

.float-icon-container {
    position: fixed;
    bottom: 20px;
    right: 20px;
    width: 50px;
    height: 50px;
    cursor: pointer;
    z-index: 9999;
}

.float-icon-container img {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
}

3. JS交互逻辑：

document.getElementById('webFloatIcon').addEventListener('click', function() {
    // 网页内操作，比如返回顶部
    window.scrollTo({top: 0, behavior: 'smooth'});
    // 如需与原生交互：
    // Android：window.android.callNativeMethod()
    // iOS：window.webkit.messageHandlers.callNativeMethod.postMessage(null)
});

内容的提问来源于stack exchange，提问作者Chintan Gujarati