脚本在 WebView 中不适用于 react-native

Posted 2023-05-07

技术标签:

【中文标题】脚本在 WebView 中不适用于 react-native【英文标题】：Script doesn't work in WebView for react-native 【发布时间】：2021-09-26 11:20:05 【问题描述】：

我尝试通过 WebView 在我的移动应用中添加 helpcrunch 聊天。为此，我需要在 html 中添加一些脚本：

<script type="text/javascript">
(function(w,d)
  w.HelpCrunch=function()w.HelpCrunch.q.push(arguments);w.HelpCrunch.q=[];
  function r()var s=document.createElement('script');s.async=1;s.type='text/javascript';s.src='https://widget.helpcrunch.com/';(d.body||d.head).appendChild(s);
  if(w.attachEvent)w.attachEvent('onload',r)elsew.addEventListener('load',r,false)
)(window, document)
</script>

<script type="text/javascript">
  HelpCrunch('init', 'app', 
    applicationId: 2,
    applicationSecret: 'appKEY'
  )

  HelpCrunch('showChatWidget');
</script>

在 ios 中一切正常。但是在android上，这个脚本不起作用。

使用我的 WebView 编写代码：

<WebView
          injectedJavaScript=INJECTED_SCRIPTS
          onMessage=this.onMessage
          javaScriptEnabled=true
          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)
        />

【问题讨论】：

【参考方案1】：

对于 WebView 问题，我真的无能为力，但我可以为 React Native 推荐一个非官方的 HelpCrunch 库。它有点旧，但我认为将两个平台的 SDK 版本更新到最新版本后它会正常工作

https://www.npmjs.com/package/react-native-helpcrunch