CODEWITHSUNDEEP
react-native
Josh
Josh

Reputation: 21

How can I get the value of a variable sent in a WebView in the HTML page?

I am developing an App that needs to send variables to an html page that will be displayed in a WebView. Here is a basic example of the React Native Application code.

export default class App extends Component {


  render()
  {

   let variableCadena="React Native";




    return(

      <Container>
        <WebView
        style={{flex: 1}}
        originWhitelist={['*']}
        source={{uri:'file:///android_asset/PaginaEjemplo.html'}}
         style={{ marginTop: 20 }}
        javaScriptEnabled={true}
        domStorageEnabled={true}
        allowFileAccess={true}
        allowUniversalAccessFromFileURLs={true}
        injectedJavaScript={variableCadena} 
        >

      </WebView>      
      </Container>
    );
  }
};

The HTML can be as simple as the following one.

    <html>
    <head>
    <title>Ejemplo de inyeccion desde React Native</title>
    <script type="text/javascript">
        var variable = variableCadena;
    </script>
    </head>

    <body>
    <script type="text/javascript">

    document.body.innerHTML = "<h1>La variable es:"
    +variable+ "</h1>"

   </script>
   </body>
   </html>

The result that is expected is that the web page shows in the h1 tags the React Native text that was defined in the application. Thank you all for your suggestions.

Upvotes: 2

Views: 1697

Answers (1)

Abraham
Abraham

Reputation: 9885

First of all, I hope you are using https://github.com/react-native-community/react-native-webview instead of the from react-native because it's now being deprecated.

You can use the injectJavascript(...) method. Something like this...

import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';

export default class App extends Component {
  render() {
    const run = `
      document.body.style.backgroundColor = 'blue';
      true;
    `;

    setTimeout(() => {
      this.webref.injectJavaScript(run);
    }, 3000);

    return (
      <View style={{ flex: 1 }}>
        <WebView
          ref={r => (this.webref = r)}
          source={{
            uri: 'https://stackoverflow.com/questions/57065527',
          }}
        />
      </View>
    );
  }
}

that will give you something like this:

Now work around that! Check the snack: https://snack.expo.io/@abranhe/stackoverflow-57065527

UPDATE the author requested a demo using a variable

App.js

import React, { Component } from 'react';
import { View } from 'react-native';
import { WebView } from 'react-native-webview';

export default class App extends Component {
    injectjs() {
        let name = 'Abraham';

        setTimeout(() => {});
        return `document.getElementById('inject').innerHTML = '<h1>The  name is <b>${name}</b></h1>'`;
    }
    render() {
        return (
            <View style={{ flex: 1 }}>
                <WebView
                    ref={(r) => (this.webref = r)}
                    injectedJavaScript={this.injectjs()}
                    source={require('./demo.html')}
                />
            </View>
        );
    }
}

demo.html

<html>
  <head>
    <title>Ejemplo de inyeccion desde React Native</title>
    <style>
      body {
        background-color: aquamarine;
        display: -webkit-flex;
        -webkit-justify-content: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }
    </style>
  </head>
  <body>
    <img src="https://cdn.sstatic.net/Sites/stackoverflow/company/img/logos/so/so-logo.svg?v=a010291124bf" />
    <div id="inject">
    </body>
</html>

Result

enter image description here

Upvotes: 3

Related Questions