如何检测ReactJS应用是否从Cordova打开并适配PDF显示？

核心思路：环境判断+条件渲染 #

你的场景是Web端用自定义Iframe带品牌头展示PDF，但Cordova的InAppBrowser无法处理PDF，直接做环境判断，不同环境用不同展示方式即可。

1. 编写Cordova环境检测函数 #

直接检测全局cordova对象即可：

const isInCordova = () => {
  return typeof window !== 'undefined' && !!window.cordova;
};

2. 改造PDF渲染组件 #

将原有的单一渲染逻辑改为条件判断：

import { Iframe } from './path-to-your-iframe-component';

const PdfViewer = ({ uri, style }) => {
  const isCordovaEnv = isInCordova();

  if (isCordovaEnv) {
    // Cordova环境下用a标签跳转，补全标签交互内容
    return (
      <a 
        href={uri} 
        rel="noopener noreferrer" 
        target="_blank"
        className="your-custom-link-style"
      >
        查看PDF文件
      </a>
    );
  }

  // 非Cordova环境继续使用带品牌头的自定义Iframe
  return <Iframe className="h-full" src={uri} style={style} />;
};

其他可选解决方案 #

• 本地PDF阅读器调用：使用cordova-plugin-file将PDF下载到本地存储，再通过cordova-plugin-inappbrowser调用系统默认PDF阅读器打开本地文件，实现Cordova内原生打开PDF的效果。
• 集成PDF.js库：将PDF.js集成到React项目中，完全通过Web方式渲染PDF，Web和Cordova环境统一展示逻辑，还能自定义头部与品牌标识，彻底摆脱对系统或InAppBrowser的PDF处理依赖。
• InAppBrowser参数调优：尝试给InAppBrowser添加location=no,toolbar=yes等配置参数，或升级cordova-plugin-inappbrowser到最新版本，部分版本修复了PDF兼容问题。

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