CODEWITHSUNDEEP
javascriptreactjsreact-nativewebview
Grapes
Grapes

Reputation: 361

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

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>

Upvotes: 0

Views: 7448

Answers (2)

hong developer
hong developer

Reputation: 13924

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);

Upvotes: 3

fl3a
fl3a

Reputation: 108

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");

Upvotes: 1

Related Questions