How to call JavaScript code injected into WebView of ReactNative in React?

Question

I injected a piece of JS code into WebView in React-Native. I want to call this js code on my web page (using React), just like using the API in the program, but I failed.

This is my current code:

const WebAPICode = `
function test() {
  alert('Hello');
}
`;

export default class PluginView extends Component {

  render() {
    return (
      <View {...this.props}>
        <WebView
          ref={webView=> this.webView = webView}
          originWhitelist={['*']}
          source={{ uri: "http://10.0.2.2:3000/" }}
          onLoadEnd={()=>this.webView.injectJavaScript(WebAPICode)}
        />
        <Text>{WebAPICode}</Text>
      </View>
    );
  }
}

I want to call it in React, but this is obviously the wrong way. I still don't know how to implement it after checking a lot of information.

function App() {
  return (
    <span onClick={()=>test()}>test</span>
  );
}

Just like the setTimeout function, there is no such function in the js standard, but the browser adds it to the window object, window.setTimeout, and I also want to add my own defined function to the webview, just like test.

Inject the test function into this webview instead of writing it in the script tag.

<html lang="en">
<head>
  <script>
    // The function is defined here, but I want this 
    // definition to be injected into the browser 
    function test() {
      alert('hello');
    }
    /**
     * This is what I want:
     * <WebView injectedJavaScript={`function test() {
     *                                 alert('hello');
     *                               }`}/>
     * Inject the test function into this webview instead
     * of writing it in the script tag.
     */
  </script>
</head>
<body>
  <script>
    test();
  </script>
</body>
</html>

hong developer · Accepted Answer · 2019-08-05 15:24:49Z

3

Look at the official document of the webview and see how to use it. Always refer to official documents when writing modules.

You can use this

const WebAPICode = `alert('Hello')`;
...
      <WebView
          ref={webView=> this.webView = webView}
          originWhitelist={['*']}
          source={{ uri: "http://10.0.2.2:3000/" }}
          javaScriptEnabled={true}
          injectedJavaScript={WebAPICode}
        />

If you have this function on your web, you can call it.

<html>
<head>
    <script language="javascript">
    function test()
    {
         alert('Hello');
    }
   </script>
</head>
<body>
...

const WebAPICode = `test()`;
...
      <WebView
          ref={webView=> this.webView = webView}
          originWhitelist={['*']}
          source={{ uri: "http://10.0.2.2:3000/" }}
          javaScriptEnabled={true}
          injectedJavaScript={WebAPICode}
        />

To execute the data shown in the comments, you have to do this.

Your webview page do this

var data = {name: "getname"}
window.ReactNativeWebView.postMessage(data);

  handleMessage(e) {
    //여러 데이터가 리스트 형식으로 올때
    let parsedata = JSON.parse(e.nativeEvent.data);
    message = parsedata.name
    if(message == "get name") {
       const data = { name: "John"  }
    this.webview.postMessage(JSON.stringify(data));
    } 
  }
<WebView
 ref={webview => (this.webview = webview)}
 onMessage={mssage => this.handleMessage(mssage)}
}

Receive webview page

document.addEventListener("message", function(event) {
    console.log("Received post message", event);

    test(event.data);
}, false);

edited Aug 5, 2019 at 15:24

answered Aug 5, 2019 at 14:22

hong developer

13.9k4 gold badges46 silver badges73 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Grapes Over a year ago

I want to implement injecting a wrapped function into a web page view, such as a test function, and then in other web pages I just need to write test() to call the injected function. The test function is injected rather than written in a web page.

hong developer Over a year ago

You mean you want to invoke the functions of two different webpages at the same time?

Grapes Over a year ago

The code I want to inject is the definition of the test function, not the call. First inject the definition of the test function into the browser, then any web page just call test(). Just like writing the definition of the test function in the <script> tag, but I want to inject the contents of the <script> tag into the browser.

hong developer Over a year ago

JavaScript code is only invoked on the first page you load into the web view.

hong developer Over a year ago

If you want to call a function on a web page, just like my answer.

|

fl3a · Accepted Answer · 2019-08-05 14:28:43Z

1

You can call postMessage from webview and set your webview onMessage props like this.

onMessage={event => { console.log(event) } }

In your webview html:

window.ReactNativeWebView.postMessage("Your Message");

answered Aug 5, 2019 at 14:28

fl3a

1085 bronze badges

Collectives™ on Stack Overflow

How to call JavaScript code injected into WebView of ReactNative in React?

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related