如何在react-native-webview中注入jQuery并成功执行代码？

问题原因 #

你的代码无法正常运行主要有两个原因：

• jQuery文件路径无效：WebView无法识别你写的相对路径jsScripts/jquery-3.6.1.min.js，本地资源需要通过正确的方式引入才能被WebView加载。
• 注入时机不匹配：injectedJavaScript的代码会在页面初始化阶段执行，此时jQuery还未加载完成，导致$变量未定义，代码无法生效。

解决办法 #

办法一：直接内嵌jQuery代码到HTML中 #

把jQuery的源码直接内嵌到HTML的<script>标签里，彻底避免路径问题：

export const htmlTest = `
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
    <title>Get the distributor that is used for the authentication</title>
    <script type="text/javascript">
        // 粘贴jquery-3.6.1.min.js的全部代码到这里
    </script>
</head>
<body>
<p id="demo" style="font-size: x-large"></p>
</body>
</html>
`;

然后保持jsTest不变即可：

export const jsTest = `$(document).ready(() => {
  $('#demo').html('Hello, World!');
});`;

办法二：正确引入本地jQuery文件+延迟注入代码 #

1. 配置本地文件路径：
   将jquery-3.6.1.min.js放在项目的对应目录（比如src/jsScripts/），然后通过require引入路径：

   export const htmlTest = `
   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
           "http://www.w3.org/TR/html4/loose.dtd"> 
   <html>
   <head>
       <title>Get the distributor that is used for the authentication</title>
       <script type="text/javascript" src="${require('./jsScripts/jquery-3.6.1.min.js')}"></script>
   </head>
   <body>
   <p id="demo" style="font-size: x-large"></p>
   </body>
   </html>
   `;
   

   注意：路径要根据你实际的文件位置调整。

2. 延迟注入代码：
   使用WebView的onLoadEnd事件，等页面完全加载（包括jQuery）后再注入代码：

   import React, { useRef } from 'react';
   import { WebView } from 'react-native-webview';
   
   const App = () => {
     const webViewRef = useRef<WebView>(null);
   
     const onLoadEnd = () => {
       const jsCode = `$(document).ready(() => {
         $('#demo').html('Hello, World!');
       });`;
       webViewRef.current?.injectJavaScript(jsCode);
     };
   
     return (
       <WebView
         ref={webViewRef}
         javaScriptEnabled={true}
         originWhitelist={['*']}
         source={{ html: htmlTest }}
         onLoadEnd={onLoadEnd}
         onMessage={onMessage}
       />
     );
   };
   
   export default App;
   

办法三：直接在HTML中写入执行代码 #

最简便的方式是把jQuery代码直接写在HTML的<script>标签里，放在jQuery引入之后：

export const htmlTest = `
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" 
        "http://www.w3.org/TR/html4/loose.dtd"> 
<html>
<head>
    <title>Get the distributor that is used for the authentication</title>
    <script type="text/javascript" src="${require('./jsScripts/jquery-3.6.1.min.js')}"></script>
    <script type="text/javascript">
        $(document).ready(() => {
          $('#demo').html('Hello, World!');
        });
    </script>
</head>
<body>
<p id="demo" style="font-size: x-large"></p>
</body>
</html>
`;

这种方式不需要单独配置注入逻辑，代码会在jQuery加载完成后自动执行。

内容的提问来源于stack exchange，提问作者Mr. Robot