Ionic Cordova Android InAppBrowser如何自定义创建加载LoadingSpinner

方案一：原生插件层扩展（稳定无兼容问题，适合长期维护） #

这个方案直接修改Cordova InAppBrowser插件的Android原生代码，逻辑和iOS端调用系统Spinner的实现对齐，不存在跨域、CSP策略限制的问题，全场景可用。

• 优点：兼容性拉满，不管目标页面是什么安全策略，Spinner都能正常显示，视觉上也可以和iOS端的系统控件完全对齐
• 缺点：需要修改插件原生代码，后续升级InAppBrowser插件版本时，需要重新适配对应的代码
• 具体操作步骤：
  • 定位插件Android原生目录：platforms/android/app/src/main/java/org/apache/cordova/inappbrowser，找到对应的布局文件res/layout/inappbrowser.xml
  • 在布局的WebView节点同级位置，添加居中显示的环形ProgressBar，默认隐藏，示例代码：

    <ProgressBar
        android:id="@+id/loading_spinner"
        android:layout_width="48dp"
        android:layout_height="48dp"
        android:layout_centerInParent="true"
        android:visibility="gone"
        android:indeterminateTint="@color/brand_primary"/>
    

  • 在InAppBrowser的原生代码里，找到WebViewClient的初始化逻辑，绑定三个状态回调控制Spinner显隐：
    • 重写onPageStarted方法：将Spinner的状态设为View.VISIBLE
    • 重写onPageFinished方法：将Spinner的状态设为View.GONE
    • 重写onReceivedError方法：页面加载出错时同样将Spinner设为View.GONE，避免加载卡死
  • 样式适配：可以根据项目视觉规范调整Spinner的尺寸、颜色，和iOS端的系统默认Spinner视觉保持统一，比如把indeterminateTint值调成和iOS系统加载圈一致的浅灰色或品牌主色，尺寸控制在40-48dp，符合移动端交互规范。

方案二：前端注入实现（零原生改动，快速上线） #

如果不想修改原生插件代码，规避插件升级的维护成本，可以通过InAppBrowser的脚本注入能力实现，适合快速迭代的短期项目。

• 优点：完全在前端层实现，不用触碰原生代码，改完马上能测，没有插件升级的维护负担
• 缺点：如果目标加载页面开启了严格的CSP（内容安全策略），禁止外部脚本注入，会导致Spinner无法正常显示
• 具体实现步骤：
  • 正常打开InAppBrowser实例，绑定加载状态事件，通过注入脚本实现Spinner的显隐：

    // 打开目标页面的InAppBrowser
    const inAppBrowserRef = cordova.InAppBrowser.open(targetUrl, '_blank', 'zoom=no');
    
    // 页面开始加载时，注入自定义Spinner的DOM和样式
    inAppBrowserRef.addEventListener('loadstart', () => {
      inAppBrowserRef.executeScript({
        code: `
          // 清理可能残留的旧Spinner
          document.getElementById('app-loading-spinner')?.remove();
          // 新建Spinner节点
          const spinner = document.createElement('div');
          spinner.id = 'app-loading-spinner';
          spinner.style.cssText = 'position:fixed;top:50%;left:50%;z-index:999999;width:48px;height:48px;border:4px solid #eee;border-top-color:#007aff;border-radius:50%;animation:spin 0.8s linear infinite;';
          // 注入旋转动画样式
          const animateStyle = document.createElement('style');
          animateStyle.textContent = '@keyframes spin { to { transform: translate(-50%, -50%) rotate(360deg); } }';
          document.head.appendChild(animateStyle);
          document.body.appendChild(spinner);
          // 加10秒超时兜底，避免一直加载不消失
          setTimeout(() => { document.getElementById('app-loading-spinner')?.remove(); }, 10000);
        `
      });
    });
    
    // 页面加载完成时，移除Spinner
    inAppBrowserRef.addEventListener('loadstop', () => {
      inAppBrowserRef.executeScript({
        code: `document.getElementById('app-loading-spinner')?.remove();`
      });
    });
    
    // 页面加载出错时，移除Spinner
    inAppBrowserRef.addEventListener('loaderror', () => {
      inAppBrowserRef.executeScript({
        code: `document.getElementById('app-loading-spinner')?.remove();`
      });
    });
    

实现注意事项 #

• 原生修改的场景下，要确保Spinner的层级在WebView上层、InAppBrowser的顶部导航栏下层，不要遮挡返回、关闭等操作按钮
• 不管用哪种实现方案，都要加加载超时的兜底逻辑，避免页面一直无响应时Spinner永久显示，破坏交互体验
• 跨平台视觉对齐：尽量将Android和iOS端的Spinner尺寸、颜色、动画速度调整为一致，减少跨平台的体验割裂。

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