React Native中WebView注入HelpCrunch脚本Android端不生效问题

1. 安卓WebView默认未开启DOM存储权限，Helpcrunch组件运行依赖localStorage等本地存储能力，缺少该权限会直接导致初始化失败。
2. 不同平台WebView的脚本注入时机存在差异：iOS端injectedJavaScript默认在页面DOM加载完成后执行，而安卓端默认注入时机早于window.load事件触发时机。原脚本依赖window.load事件加载远端Helpcrunch资源，后续执行init、showChatWidget方法时，远端资源还未加载完成，导致方法调用失效。
3. 安卓WebView默认禁止混合内容加载，若Helpcrunch资源存在HTTP子资源加载场景，会被拦截导致组件无法渲染。
4. 安卓端injectedJavaScript要求脚本最终必须返回一个值，否则会抛出执行异常，原注入脚本无返回值，也可能导致执行失败。

方案1：调整WebView配置 + 优化注入脚本 #

步骤1：补全WebView安卓专属配置 #

<WebView
  injectedJavaScript={INJECTED_SCRIPTS}
  injectedJavaScriptBeforeContentLoaded={false} // 显式指定页面加载完成后再注入脚本
  onMessage={this.onMessage}
  javaScriptEnabled={true}
  domStorageEnabled={true} // 开启DOM存储权限，安卓必填
  mixedContentMode="always" // 允许混合内容加载
  automaticallyAdjustContentInsets={false}
  source={{ html: `<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<h1 id="about">regnergioi</h1>
</body>
</html>` }}
  style={{ marginTop: 30, marginBottom: 10, height: 400 }}
  renderError={(a) => this.handleError(a)}
  onError={(a) => this.handleError(a)}
/>

步骤2：优化注入脚本逻辑 #

const INJECTED_SCRIPTS = `
(function(w,d){
  w.HelpCrunch=function(){w.HelpCrunch.q.push(arguments)};w.HelpCrunch.q=[];
  // 移除window.load监听，直接加载远端资源
  var s=document.createElement('script');
  s.async=1;
  s.type='text/javascript';
  s.src='https://widget.helpcrunch.com/';
  // 等远端资源加载完成后再执行初始化、显示逻辑
  s.onload = function() {
    HelpCrunch('init', 'app', {
      applicationId: 2,
      applicationSecret: 'appKEY'
    })
    HelpCrunch('showChatWidget');
  }
  (d.body||d.head).appendChild(s);
})(window, document)
true; // 安卓端注入脚本必须返回真值，避免执行异常
`;

方案2：直接将脚本写入HTML（兼容性最优） #

完全绕过injectedJavaScript的平台差异，把Helpcrunch脚本直接嵌入到HTML的body末尾，无需额外注入脚本：

<WebView
  onMessage={this.onMessage}
  javaScriptEnabled={true}
  domStorageEnabled={true}
  mixedContentMode="always"
  automaticallyAdjustContentInsets={false}
  source={{ html: `<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
<h1 id="about">regnergioi</h1>
<script type="text/javascript">
(function(w,d){
  w.HelpCrunch=function(){w.HelpCrunch.q.push(arguments)};w.HelpCrunch.q=[];
  var s=document.createElement('script');s.async=1;s.type='text/javascript';s.src='https://widget.helpcrunch.com/';
  s.onload = function() {
    HelpCrunch('init', 'app', {
      applicationId: 2,
      applicationSecret: 'appKEY'
    })
    HelpCrunch('showChatWidget');
  }
  (d.body||d.head).appendChild(s);
})(window, document)
</script>
</body>
</html>` }}
  style={{ marginTop: 30, marginBottom: 10, height: 400 }}
  renderError={(a) => this.handleError(a)}
  onError={(a) => this.handleError(a)}
/>

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