Execute JavaScript inside WebView source

Question

Anyone knows how (if possible) to execute JS "inside" a WebView in React Native?

The scenario: I have this remote logon page (website) displayed in my WebView, and this website has a sequence of events that happens corresponding to the user activity. All events fire one callback each, which the WebView must listen on (not an issue).
Within each callback there is a reference to a JavaScript function, that must be called inside the WebView (that's the issue!).
So from my React Native app, I need to call this JavaScript function, that's placed on the website page (source) that's loaded in my WebView.

What I have: I listen for the callbacks with onShouldStartLoadWithRequest and manipulate the behaviour of the WebView with this and it works great.
Regarding JavaScript execution I have tried the method getWebViewHandle but that didn't do it, at least not from my seat.
I looked at injectedJavaScript property too, but the problem is that I don't know what JavaScript to execute before the callbacks are fired.

Anyone knows how to solve this?

halilb · Accepted Answer · 2018-11-27 10:27:51Z

10

November 2018 Update

Webview component now supports injectJavaScript and injectedJavaScript props.

Example:

<WebView
  source={{ uri: 'https://github.com/facebook/react-native' }}
  injectedJavaScript="window.alert('first message')"
  injectJavaScript={() => {
    return "window.alert('second message')";
  }}
/>

Original answer

Calling javascript methods inside a Webview is possible with iOS and Android native components. But required API for javascript execution is currently not provided by react-native. You can see the discussion in this github issue.

However, there is a 3rd party module that's providing bi-directional communication between your app and a Webview. You can start using it after integrating some native code into your project.

edited Nov 27, 2018 at 10:27

answered May 18, 2016 at 16:13

halilb

4,1251 gold badge25 silver badges32 bronze badges

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

1 Comment

Kaushik Wavhal Over a year ago

As of Nov 2018, there are parameters available on the Webview React Native component to inject javascript inside the pages.

Maks · Accepted Answer · 2017-10-11 01:01:07Z

1

There is now a good article covering how to communicate with content within a React Native Webview using injectJavascript API as well as onMessage/postMessage.

answered Oct 11, 2017 at 1:01

Maks

8,0156 gold badges45 silver badges69 bronze badges

Collectives™ on Stack Overflow

Execute JavaScript inside WebView source

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related