Issue with injecting Javascript function in Android React Native WebView, while it functions correctly on iOS React Native platforms

Question

Issue with injecting Javascript function in Android React Native WebView, while it functions correctly on iOS React Native platforms

Encountering a challenge while implementing webview functionality. I am attempting to inject a JavaScript function into my webview, but it seems to only be functioning properly on iOS and not on Android.

Take a look at my code :

Webview :

<WebView
                            source={{uri:"http://mywebview.com/webview.php"}}
                            injectedJavaScript={jsCode}
                            mixedContentMode={'compatibility'}
                            javaScriptEnabledAndroid={true}
                            style={{height: 300}} />

Javascript Code to Inject :

let jsCode = `function doPopUp() {
                        document.querySelector('#myBody').style.backgroundColor = 'red';
                        alert('hello world from webview');
                        }`;

The JS injection works fine on iOS, but encounters issues on Android. However, when I directly include the JS code in the php file and open it in an Android browser, it works perfectly. Interestingly, if I remove the syntax inside the JS function, it also works fine. What could be causing this discrepancy and how can I resolve it?

javascript android react-native webview

Answer 1

Answer №1

After several hours of troubleshooting, I finally found a solution to the issue at hand. This particular method seems to do the trick.

Interestingly, without utilizing the ref attribute, the injectedJavaScript won't execute as expected. However, once the ref is set and

webViewRef.current.injectJavaScript(runFirstScript);

is implemented, the injectedJavaScript works seamlessly.

This problem was isolated to IOS and did not affect android devices.

I also shared this fix on the github issues page for react-native-webview: https://github.com/react-native-webview/react-native-webview/issues/2259

 ...
 
  const webViewRef = useRef();

 const runFirstScript = `
      document.body.style.backgroundColor = 'red';
      setTimeout(function() { window.alert('hi') }, 2000);
      true; // note: this is required, or you'll sometimes get silent failures
    `;
    
    const runSecondScript = `
      setTimeout(function() { window.alert('hello') }, 2000);
      true; 
    `;

  if (webViewRef.current != null) {
    webViewRef.current.injectJavaScript(runSecondScript);
  }
  return (
    <>
      <WebView
        ref={ref => (webViewRef.current = ref)}
        cacheEnabled={true}
        injectedJavaScript={runFirstScript} // now injectedJavaScript will trigger along with the ref.
        javaScriptEnabled
        mixedContentMode={'compatibility'}
        onMessage={event => {
          //    alert(event.nativeEvent.data);
        }}
        originWhitelist={['*']}
        scalesPageToFit
        source={{uri: 'https://example.com'}}
        startInLoadingState={true}
        userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36"
      />
    </>
  );

Answer 2

After several hours of troubleshooting, I finally found a solution to the issue at hand. This particular method seems to do the trick.

Interestingly, without utilizing the ref attribute, the injectedJavaScript won't execute as expected. However, once the ref is set and

webViewRef.current.injectJavaScript(runFirstScript);

is implemented, the injectedJavaScript works seamlessly.

This problem was isolated to IOS and did not affect android devices.

I also shared this fix on the github issues page for react-native-webview: https://github.com/react-native-webview/react-native-webview/issues/2259

 ...
 
  const webViewRef = useRef();

 const runFirstScript = `
      document.body.style.backgroundColor = 'red';
      setTimeout(function() { window.alert('hi') }, 2000);
      true; // note: this is required, or you'll sometimes get silent failures
    `;
    
    const runSecondScript = `
      setTimeout(function() { window.alert('hello') }, 2000);
      true; 
    `;

  if (webViewRef.current != null) {
    webViewRef.current.injectJavaScript(runSecondScript);
  }
  return (
    <>
      <WebView
        ref={ref => (webViewRef.current = ref)}
        cacheEnabled={true}
        injectedJavaScript={runFirstScript} // now injectedJavaScript will trigger along with the ref.
        javaScriptEnabled
        mixedContentMode={'compatibility'}
        onMessage={event => {
          //    alert(event.nativeEvent.data);
        }}
        originWhitelist={['*']}
        scalesPageToFit
        source={{uri: 'https://example.com'}}
        startInLoadingState={true}
        userAgent="Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/78.0.3904.97 Safari/537.36"
      />
    </>
  );

Answer 3

Answer №2

When integrating a javascript function for android, it is crucial to incorporate it into the DOM structure. To achieve this, replace function with document within jsCode.

let jsCode = `document.doPopUp() {
                        document.querySelector('#myBody').style.backgroundColor = 'red';
                        alert('hello world from webview');
                        }`;

Answer 4

When integrating a javascript function for android, it is crucial to incorporate it into the DOM structure. To achieve this, replace function with document within jsCode.

let jsCode = `document.doPopUp() {
                        document.querySelector('#myBody').style.backgroundColor = 'red';
                        alert('hello world from webview');
                        }`;

Issue with injecting Javascript function in Android React Native WebView, while it functions correctly on iOS React Native platforms

Answer №1

Answer №2

Similar questions

Unresolved promise rejection in a React application

The page fails to redirect to the intended page when provided with an incorrect URL

Angular JS - Implementing a flexible URL structure for fetching data using $http GET

How can I incorporate multiple graphs into my AmCharts display?

Iterate through elements within an HTML table by utilizing jQuery

"Which is the better choice for a Django application's for loop: views.py or

Verify the accurate sequence for arranging the items in the drag and drop list

"Populate the input fields in a table with the data retrieved from the AJAX request's

Unable to halt the multiplexer

The ASP input class fails to trigger the JavaScript function

The localstorage in Ionic 3 with Angular 5 consistently returns a null value when attempting to retrieve the stored value

Utilizing Mongoose Schema for CSV Import

There seems to be a partial malfunction of the mailto function in AS3 when used on

How to Handle the Absence of HTML5 Spellcheck in Specific Web Browsers

Can Node.js handle parsing this as JSON?

What could be the reason for Jest throwing an error during the testing of the `Colyseus` game?

The presence of the If-Modified-Since header causes the CORS OPTIONS request to experience failure

Is the Bootstrap success icon displaying in white on white instead of the traditional green color?

I'm looking for the best way to send POST data to an API with Meteor's HTTP package

The function correctly identifies the image source without error