New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[WebView] Message passing between WebView / Javascript #586

Closed
notduncansmith opened this Issue Apr 1, 2015 · 32 comments

Comments

Projects
None yet
@notduncansmith

notduncansmith commented Apr 1, 2015

It would be really great to be able to run JS inside of a WebView component and register event listeners within regular React Native code.

My specific use-case is PouchDB, which really wants to run either in Node.js or the browser; however, there are lots of libraries that are designed to work within one or the other of the existing JS runtimes, but would still be useful to a React Native app.

I'm thinking something along these lines, perhaps register a react:// protocol or something for message passing - though I'd love to hear about a cleaner way to implement it.

@ghost

This comment has been minimized.

Show comment
Hide comment
@ghost

ghost Apr 2, 2015

+1. That would be quite handy indeed.

ghost commented Apr 2, 2015

+1. That would be quite handy indeed.

@nwjohn

This comment has been minimized.

Show comment
Hide comment
@nwjohn

nwjohn Apr 2, 2015

+1, also fits my use case.

nwjohn commented Apr 2, 2015

+1, also fits my use case.

@hedgerwang

This comment has been minimized.

Show comment
Hide comment
@hedgerwang

hedgerwang Apr 8, 2015

Contributor

I came up this hacky approach to send message from the webview's HTML back to the react native.
The idea is to generate a navigation change event from web page so that the react native can catch it.

var WebViewExample = React.createClass({

  getInitialState() {
    return {
      message: '....',
    };
  },

  render() {
    var html = `
      <html>
        <script>
          var pinID = 0;
          function ping() {
            var message = 'hello ' + Date.now();
            document.title = message;
            window.location.hash = pinID++;
            return false;
          }
        </script>
        <body>
          This is a HTML Page inside WebView
          <hr />
          <button onClick="window.location.hash = ping()">ping</button>
        </body>
      </html>
    `;

    return (
      <View>
        <Text style={{display: 'block'}}>Native View</Text>
        <Text style={{display: 'block'}}>{this.state.message}</Text>
        <Text style={{display: 'block'}}>Web View</Text>
        <WebView
          automaticallyAdjustContentInsets={false}
          style={{height: 400}}
          html={html}
          onNavigationStateChange={this.onNavigationStateChange}
          startInLoadingState={false}
        />
      </View>
    );
  },

  onNavigationStateChange(navState) {
    this.setState({
      message: navState.title,
    });
  },
});
Contributor

hedgerwang commented Apr 8, 2015

I came up this hacky approach to send message from the webview's HTML back to the react native.
The idea is to generate a navigation change event from web page so that the react native can catch it.

var WebViewExample = React.createClass({

  getInitialState() {
    return {
      message: '....',
    };
  },

  render() {
    var html = `
      <html>
        <script>
          var pinID = 0;
          function ping() {
            var message = 'hello ' + Date.now();
            document.title = message;
            window.location.hash = pinID++;
            return false;
          }
        </script>
        <body>
          This is a HTML Page inside WebView
          <hr />
          <button onClick="window.location.hash = ping()">ping</button>
        </body>
      </html>
    `;

    return (
      <View>
        <Text style={{display: 'block'}}>Native View</Text>
        <Text style={{display: 'block'}}>{this.state.message}</Text>
        <Text style={{display: 'block'}}>Web View</Text>
        <WebView
          automaticallyAdjustContentInsets={false}
          style={{height: 400}}
          html={html}
          onNavigationStateChange={this.onNavigationStateChange}
          startInLoadingState={false}
        />
      </View>
    );
  },

  onNavigationStateChange(navState) {
    this.setState({
      message: navState.title,
    });
  },
});
@sahrens

This comment has been minimized.

Show comment
Hide comment
@sahrens

sahrens Apr 8, 2015

Contributor

We can also just run all of the ReactNative JS in a WKWebView - would that make PouchDB happy? We could potentially make the executor mode configurable per app so you could use that instead of JSC if you prefer that tradeoff (more latency, probably more memory, etc).

Contributor

sahrens commented Apr 8, 2015

We can also just run all of the ReactNative JS in a WKWebView - would that make PouchDB happy? We could potentially make the executor mode configurable per app so you could use that instead of JSC if you prefer that tradeoff (more latency, probably more memory, etc).

@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Apr 8, 2015

Member

@sahrens Even if we do that, I'm not sure if we'd want to allow access to all DOM APIs?

I'm don't think that running incompatible libraries in a headless web view is likely the right solution, but there certainly are cases where you'd want to have something in a web view and pass messages to it, so maybe we could add something here.

Member

sophiebits commented Apr 8, 2015

@sahrens Even if we do that, I'm not sure if we'd want to allow access to all DOM APIs?

I'm don't think that running incompatible libraries in a headless web view is likely the right solution, but there certainly are cases where you'd want to have something in a web view and pass messages to it, so maybe we could add something here.

@brentvatne brentvatne changed the title from Message passing between WebView / Javascript to [WebView] Message passing between WebView / Javascript May 31, 2015

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne May 31, 2015

Collaborator

@notduncansmith - any interest in this still? if so, a PR would be welcome! you can ping me on irc/twitter @notbrent (nice username, by the way) if you need a hand

Collaborator

brentvatne commented May 31, 2015

@notduncansmith - any interest in this still? if so, a PR would be welcome! you can ping me on irc/twitter @notbrent (nice username, by the way) if you need a hand

@Intellicode

This comment has been minimized.

Show comment
Hide comment
@Intellicode

Intellicode Jun 10, 2015

Contributor

I had a go at this, and I got basic messages working using the techniques described at the Stackoverflow page. However, I was wondering how Apple would look at this feature since it allows remote websites execute code (sort of). Titanium seems to allow communication if the code is loaded from a local source (http://docs.appcelerator.com/titanium/3.0/#!/guide/Communication_Between_WebViews_and_Titanium). Any thoughts on this?

Contributor

Intellicode commented Jun 10, 2015

I had a go at this, and I got basic messages working using the techniques described at the Stackoverflow page. However, I was wondering how Apple would look at this feature since it allows remote websites execute code (sort of). Titanium seems to allow communication if the code is loaded from a local source (http://docs.appcelerator.com/titanium/3.0/#!/guide/Communication_Between_WebViews_and_Titanium). Any thoughts on this?

@brentvatne

This comment has been minimized.

Show comment
Hide comment
@brentvatne

brentvatne Jun 11, 2015

Collaborator

@Intellicode - it seems like Titanium allows some actions to be triggered on remote sites as well - that said, I think the best angle here is to pull this out into an external library where we can discuss it and iterate on it and when it is mature enough potentially integrating it back into React Native. Are you willing to do that? It would be awesome 😄

Collaborator

brentvatne commented Jun 11, 2015

@Intellicode - it seems like Titanium allows some actions to be triggered on remote sites as well - that said, I think the best angle here is to pull this out into an external library where we can discuss it and iterate on it and when it is mature enough potentially integrating it back into React Native. Are you willing to do that? It would be awesome 😄

@Intellicode

This comment has been minimized.

Show comment
Hide comment
@Intellicode

Intellicode Jun 12, 2015

Contributor

I'll have a go at it this weekend, should be a good learning opportunity :)

Contributor

Intellicode commented Jun 12, 2015

I'll have a go at it this weekend, should be a good learning opportunity :)

@kevlened

This comment has been minimized.

Show comment
Hide comment
@kevlened

kevlened Jun 22, 2015

I was able to get this to work: https://github.com/alinz/react-native-webview-bridge

The example included in the repo was more helpful than the docs.

UPDATE: Be aware of this issue - alinz/react-native-webview-bridge#3

kevlened commented Jun 22, 2015

I was able to get this to work: https://github.com/alinz/react-native-webview-bridge

The example included in the repo was more helpful than the docs.

UPDATE: Be aware of this issue - alinz/react-native-webview-bridge#3

@Intellicode

This comment has been minimized.

Show comment
Hide comment
@Intellicode

Intellicode Jun 26, 2015

Contributor

nice, I guess I can stop working on my version then :)

Contributor

Intellicode commented Jun 26, 2015

nice, I guess I can stop working on my version then :)

@christopherdro

This comment has been minimized.

Show comment
Hide comment
@christopherdro

christopherdro Sep 13, 2015

Contributor

@ide @brentvatne Issue can be closed.
Anyone looking for this functionality can take a look at https://github.com/alinz/react-native-webview-bridge.

Contributor

christopherdro commented Sep 13, 2015

@ide @brentvatne Issue can be closed.
Anyone looking for this functionality can take a look at https://github.com/alinz/react-native-webview-bridge.

@ide ide closed this Sep 13, 2015

@gre

This comment has been minimized.

Show comment
Hide comment
@gre

gre Oct 20, 2015

Contributor

I really wish this was built-in in WebView,
communication between WebView and the React Native component feel to me to be a core feature you expect from WebView.

Contributor

gre commented Oct 20, 2015

I really wish this was built-in in WebView,
communication between WebView and the React Native component feel to me to be a core feature you expect from WebView.

@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Oct 20, 2015

Member

@gre I imagine we'd take a high-quality PR for this. You can see my comments on #1191.

Member

sophiebits commented Oct 20, 2015

@gre I imagine we'd take a high-quality PR for this. You can see my comments on #1191.

@gs-akhan

This comment has been minimized.

Show comment
Hide comment
@gs-akhan

gs-akhan Nov 12, 2015

@spicyj
What could add some relief is having some query params on the URL being added to the WebView.
This way we could at least send data one way (Is there any way to get this now ?) .
Sending Data back and forth is for sure a core requirement, I am thinking why would React-Native not do this natively.

        <WebView 
              scrollEnabled = {false}
              style = {styles.webView}
              url = "index.html?data=<base64EncodedStuff>"
            />

Thanks

gs-akhan commented Nov 12, 2015

@spicyj
What could add some relief is having some query params on the URL being added to the WebView.
This way we could at least send data one way (Is there any way to get this now ?) .
Sending Data back and forth is for sure a core requirement, I am thinking why would React-Native not do this natively.

        <WebView 
              scrollEnabled = {false}
              style = {styles.webView}
              url = "index.html?data=<base64EncodedStuff>"
            />

Thanks

@sophiebits

This comment has been minimized.

Show comment
Hide comment
@sophiebits

sophiebits Nov 12, 2015

Member

I don't know. I don't work actively on React Native. Generally, if things haven't been implemented it means that there hasn't been much demand at Facebook for a feature and often means that there hasn't been much demand externally either. This is a community project and if you want to improve the components, please send pull requests.

Member

sophiebits commented Nov 12, 2015

I don't know. I don't work actively on React Native. Generally, if things haven't been implemented it means that there hasn't been much demand at Facebook for a feature and often means that there hasn't been much demand externally either. This is a community project and if you want to improve the components, please send pull requests.

@gs-akhan

This comment has been minimized.

Show comment
Hide comment
@gs-akhan

gs-akhan commented Nov 13, 2015

@spicyj Thanks :)

@pglotov

This comment has been minimized.

Show comment
Hide comment
@pglotov

pglotov Feb 5, 2016

Contributor

Is there any way to implement a callback of WebView in JS? E.g. in Android WebViewClient has a method shouldOverrideUrlLoading() which I'd like to override in RN. Is it possible?

Contributor

pglotov commented Feb 5, 2016

Is there any way to implement a callback of WebView in JS? E.g. in Android WebViewClient has a method shouldOverrideUrlLoading() which I'd like to override in RN. Is it possible?

@gre

This comment has been minimized.

Show comment
Hide comment
@gre

gre Feb 5, 2016

Contributor

@pglotov I recommand to use https://github.com/alinz/react-native-webview-bridge . for the moment it's only for iOS but see in issues, someone has worked on an android version.

Contributor

gre commented Feb 5, 2016

@pglotov I recommand to use https://github.com/alinz/react-native-webview-bridge . for the moment it's only for iOS but see in issues, someone has worked on an android version.

@pglotov

This comment has been minimized.

Show comment
Hide comment
@pglotov

pglotov Feb 5, 2016

Contributor

@gre thanks, interesting stuff. But seems like an overkill for my purpose. I'll try to make the shouldOverrideUrlLoding() work. It is similar in purpose to already existing onShouldStartLoadWithRequest() iOS callback, so it makes sense to have one for Android as well.

Contributor

pglotov commented Feb 5, 2016

@gre thanks, interesting stuff. But seems like an overkill for my purpose. I'll try to make the shouldOverrideUrlLoding() work. It is similar in purpose to already existing onShouldStartLoadWithRequest() iOS callback, so it makes sense to have one for Android as well.

@mchev2

This comment has been minimized.

Show comment
Hide comment
@mchev2

mchev2 Feb 10, 2016

+1 for shouldOverrideUrlLoding on Android

mchev2 commented Feb 10, 2016

+1 for shouldOverrideUrlLoding on Android

@kevinejohn

This comment has been minimized.

Show comment
Hide comment
@kevinejohn

kevinejohn Feb 17, 2016

Contributor

+1 for shouldOverrideUrlLoading on Android

Contributor

kevinejohn commented Feb 17, 2016

+1 for shouldOverrideUrlLoading on Android

@chenxiaohu

This comment has been minimized.

Show comment
Hide comment
@chenxiaohu

chenxiaohu Mar 8, 2016

+1 for shouldOverrideUrlLoading on Android

chenxiaohu commented Mar 8, 2016

+1 for shouldOverrideUrlLoading on Android

@lu-ko

This comment has been minimized.

Show comment
Hide comment
@lu-ko

lu-ko Mar 11, 2016

+1 for shouldOverrideUrlLoading on Android

lu-ko commented Mar 11, 2016

+1 for shouldOverrideUrlLoading on Android

@jordansexton

This comment has been minimized.

Show comment
Hide comment
@jordansexton

jordansexton Mar 12, 2016

+1 for shouldOverrideUrlLoading on Android. Without this API exposed, all sorts of links break the WebView (mailto:, target="_blank", links to external sites, etc).

jordansexton commented Mar 12, 2016

+1 for shouldOverrideUrlLoading on Android. Without this API exposed, all sorts of links break the WebView (mailto:, target="_blank", links to external sites, etc).

@pglotov

This comment has been minimized.

Show comment
Hide comment
@pglotov

pglotov Mar 16, 2016

Contributor

Implemented shouldOverrideUrlLoading in this PR.

Contributor

pglotov commented Mar 16, 2016

Implemented shouldOverrideUrlLoading in this PR.

@saulshanabrook

This comment has been minimized.

Show comment
Hide comment
@saulshanabrook

saulshanabrook Jun 4, 2016

I want to use the Web Cryptography API (window.crypto) in React Native, and I am thinking about doing that by calling window.crypto in a WebView and using https://github.com/alinz/react-native-webview-bridge to pass the information back. This seems rather laborious, however, and potentially rather slow.

I have limited experience with React Native, so I am unsure if there is a faster/simpler way of achieving this.

saulshanabrook commented Jun 4, 2016

I want to use the Web Cryptography API (window.crypto) in React Native, and I am thinking about doing that by calling window.crypto in a WebView and using https://github.com/alinz/react-native-webview-bridge to pass the information back. This seems rather laborious, however, and potentially rather slow.

I have limited experience with React Native, so I am unsure if there is a faster/simpler way of achieving this.

@dangnelson

This comment has been minimized.

Show comment
Hide comment
@dangnelson

dangnelson Aug 25, 2016

This issue should be reopened as https://github.com/alinz/react-native-webview-bridge no longer works with the latest version of react-native, and the author is no longer supporting it as he's pushing to get it implemented into RN core.

dangnelson commented Aug 25, 2016

This issue should be reopened as https://github.com/alinz/react-native-webview-bridge no longer works with the latest version of react-native, and the author is no longer supporting it as he's pushing to get it implemented into RN core.

@tulasi-ram

This comment has been minimized.

Show comment
Hide comment
@tulasi-ram

tulasi-ram Oct 5, 2016

Hi,
I want to navigate from react native webview to Android Activity when tap on React Native webview.
I tried to use native-webview-bridge. Seems it was a wrapper class of Webview. It doing communication or bypass daata between webview to react native.

tulasi-ram commented Oct 5, 2016

Hi,
I want to navigate from react native webview to Android Activity when tap on React Native webview.
I tried to use native-webview-bridge. Seems it was a wrapper class of Webview. It doing communication or bypass daata between webview to react native.

@tslater

This comment has been minimized.

Show comment
Hide comment
@tslater

tslater Nov 11, 2016

I would really like to see this issue opened. It should be a core feature.

tslater commented Nov 11, 2016

I would really like to see this issue opened. It should be a core feature.

@svbatalov

This comment has been minimized.

Show comment
Hide comment
@svbatalov

svbatalov commented Nov 11, 2016

Already in v0.37.0. See this issue.

@R1ZZU

This comment has been minimized.

Show comment
Hide comment
@R1ZZU

R1ZZU Aug 8, 2017

Hi,
Just want to share my wrapper react-native-webview-messaging with more convenient API than in core RN WebView. Check it out and don't hesitate to submit an issue if smth is not working on your end, I'd be just glad to make it useful not only for our team 😏

R1ZZU commented Aug 8, 2017

Hi,
Just want to share my wrapper react-native-webview-messaging with more convenient API than in core RN WebView. Check it out and don't hesitate to submit an issue if smth is not working on your end, I'd be just glad to make it useful not only for our team 😏

@facebook facebook locked as resolved and limited conversation to collaborators Jul 23, 2018

Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.