react native html postMessage can not reach to WebView #11594

peixin · 2016-12-22T08:27:21Z

I use React Native webview to show index.html, and HTML will post messge to the app. The app will then receive the message and write it to console. The problem is the app cannot receive messages, when postMessage is immediately run on head. I think it maybe related to HTML not finished loading. I then used a delay with setTimeout, and it worked.

Now I want to know:

Is there better way to solve this problem?
Why the delay 100 milliscond did not work, but delay 200 milliscond did?

I am using React Native version 0.39.0, and Node version 7.2.0.

Here is the code I have so far:

index.html

<head>
<title>Index</title>
<script type="text/javascript" src="index.js"></script>
<script type="text/javascript">
    // can not be received
    postMessage('send to react native from index inline, no delay', '*');

    // can not be received
    setTimeout(function(){
        postMessage('send to react native from index inline, delay 0 milliscond', '*')
    }, 0);

    // can received
    setTimeout(function(){
        postMessage('send to react native from index inline, delay 100 milliscond', '*')
    }, 100);
    
    onload = function() {
        // can not be received
        postMessage('send to react native from index inline after onload, no delay', '*')

        // can received
        setTimeout(function () {
            postMessage('send to react native from index inline after onload, delay 0 milliscond', '*')
        }, 0);
    };
</script>

index.js

// can not be received
postMessage('send to react native from index.js, no delay', '*');

// can not be received
setTimeout(function() {
    postMessage('send to react native from index.js, delay 100 milliscond', '*')
}, 100);

// can received
setTimeout(function() {
    postMessage('send to react native from index.js, delay 200 milliscond', '*')
}, 200);

React Native web_view_page.js

return (
        <WebView
            source={{uri: 'http://127.0.0.1:8000/index.html'}}
            onMessage={(event) => console.log('onMessage:', event.nativeEvent.data)}/>
    );

Chrome console log

2016-12-21 11:45:02.367 web_view.js:147 onMessage: send to react native from index inline after onload, delay 0 milliscond
2016-12-21 11:45:02.491 web_view.js:147 onMessage: send to react native from index inline, delay 100 milliscond
2016-12-21 11:45:02.628 web_view.js:147 onMessage: send to react native from index.js, delay 200 milliscond

The text was updated successfully, but these errors were encountered:

anttu · 2017-01-08T16:44:37Z

Without setTimeout() I'm getting:

Failed to execute 'postMessage' on 'Window': 2 arguments required, but only 1 present.

However it does seem to work with the delay.

farazs · 2017-01-11T23:01:16Z

Having the same issue. If a message is sent right when the page is loaded and javascript is executed it fails with that error. However, if it's executed later it seems to work. Any update on this?

Dryymoon · 2017-01-24T03:12:14Z

You can wait for RN postMessage bridge ready, by running this function once before any window.postMessage call in yours code, tested on RN 0.39

function awaitPostMessage() {
  let isReactNativePostMessageReady = !!window.originalPostMessage;
  const queue = [];
  let currentPostMessageFn = function store(message) {
    if (queue.length > 100) queue.shift();
    queue.push(message);
  };
  if (!isReactNativePostMessageReady) {
    // const originalPostMessage = window.postMessage;
    Object.defineProperty(window, 'postMessage', {
      configurable: true,
      enumerable: true,
      get() {
        return currentPostMessageFn;
      },
      set(fn) {
        currentPostMessageFn = fn;
        isReactNativePostMessageReady = true;
        setTimeout(sendQueue, 0);
      }
    });
  }

  function sendQueue() {
    while (queue.length > 0) window.postMessage(queue.shift());
  }
}

Usage:

awaitPostMessage(); // Call this only once in your Web Code.

/* After you can call window.postMessage many times, and as soon as RN Message Bridge is ready - messadges delivered */
window.postMessage('Once :) ');
window.postMessage('Twice :) ');

Notice: In my code i limit queue for 100 message, fell free to increase this, or remove limit at all.

sylvainbaronnet · 2017-01-27T11:09:44Z

Thanks @Dryymoon, Do you know if it works in Android too ?

artdevgame · 2017-01-29T14:50:58Z

@Dryymoon Thanks for your solution. Do you know if this is intended behaviour? Seems a little odd to have to wait on the bridge to be ready to use before calling it.

I would expect the queueing behaviour to be taken care of automatically by react-native.

jqn · 2017-01-31T19:05:23Z

@beiming In my case I wanted to trigger postMessage on click and I wasn't able to trigger the message until I added event.perventDefault() in my click event like this in the WebView page:

  $(".my-btn").on("click", function(event){
    event.preventDefault();
    postMessage("send message");
  });

Also I'm able to trigger postMessage by wrapping it with:

$(document).ready(function(){
   postMessage("ready");
});

gp3gp3gp3 · 2017-02-08T20:11:20Z

@beiming Thanks for this workaround. Setting the 0 millisecond timeout on window.onload works in iOS but doesn't seem to work on android unless I set it to 200.

This still feels flimsy though, as I'm banking on I'm guessing the native bridge to be good to go at 200 milliseconds? I don't really know why this behavior is happening, but setting timeouts doesn't feel right.

andreibarabas · 2017-02-21T03:01:41Z

guys, this works on Android (i haven't tested it on iOS yet).

  <html>
   <body>
   <script>

   function waitForBridge() {
      
       //the react native postMessage has only 1 parameter
       //while the default one has 2, so check the signature
       //of the function
       
       if (window.postMessage.length !== 1){
         
         setTimeout(waitForBridge, 200);
       }
       else {
         
         window.postMessage('abc');
       }
    }
    
    window.onload = waitForBridge;
    </script>
    </body>
    </html>

farazs · 2017-03-01T21:43:36Z

I think for Android you can use window.__REACT_WEB_VIEW_BRIDGE.postMessage instead.

the delay for Android is in executing this:

window.postMessage = function(data) {
  __REACT_WEB_VIEW_BRIDGE.postMessage(String(data));
};

You can use the javascript interface directly instead for Android based on the implementation. However, this could break in a future version if they update it.

doxiaodong · 2017-03-15T08:30:22Z

@Dryymoon' s method is good, but in some env, you'd better use es5 code:

    function awaitPostMessage() {
      var isReactNativePostMessageReady = false;
      var queue = [];
      var currentPostMessageFn = function store(message) {
        queue.push(message);
      };
      if (!isReactNativePostMessageReady) {
        Object.defineProperty(window, "postMessage", {
          configurable: true,
          enumerable: true,
          get() {
            return currentPostMessageFn;
          },
          set(fn) {
            currentPostMessageFn = fn;
            isReactNativePostMessageReady = true;
            setTimeout(sendQueue, 0);
          }
        });
      }

      function sendQueue() {
        while (queue.length > 0) window.postMessage(queue.shift());
      }
    }
    awaitPostMessage();

farazs · 2017-04-11T19:26:09Z

@Dryymoon I'm curious why the setTimeout is needed? Once the set is called we update the postMessage and it should work right? It seems not to work without it but I'm not sure why.

kyle-ilantzis · 2017-04-12T00:53:54Z

For Android, Dryymoon's solution works when using the debug version. However, the release version causes the error "__REACT_WEB_VIEW_BRIDGE.postMessage is not a function"

chriscohoat · 2017-04-21T16:11:29Z

@doxiaodong I think you need to replace the get/set portion with the following:

...
        get: function () {
          return currentPostMessageFn;
        },
        set: function (fn) {
          currentPostMessageFn = fn;
          isReactNativePostMessageReady = true;
          setTimeout(sendQueue, 0);
        }
...

Otherwise Webstorm is telling me that ECMAScript 5.1 doesn't support shorthand generator methods .

shenlq · 2017-04-27T06:48:02Z

For Android, the release version causes the error "__REACT_WEB_VIEW_BRIDGE.postMessage is not a function"！！！

kyle-ilantzis · 2017-04-27T10:56:38Z

@shenlq if you disable proguard then it should work again

In android/app/build.gradle

def enableProguardInReleaseBuilds = false

ashokseervidev · 2017-05-02T13:51:31Z

@Dryymoon

code works but now i am getting below error. any idea?

"Setting onMessage on a WebView overrides existing values of window.postMessage, but a previous value was defined"

coproduto · 2017-05-02T20:06:57Z

I had the same issue here. I managed to "solve it" as my code needs to be ran only when the user changes page, so I can bind it to window.onbeforeunload, but there definitely needs to be a canonical way to check if the WebView Bridge is ready.

farazs · 2017-05-02T20:22:50Z

For Android there's the __REACT_WEB_VIEW_BRIDGE workaround I mentioned.

For iOS I ended up using https://github.com/CRAlpha/react-native-wkwebview and it doesn't have this issue with the bridge.

UIWebView also has a lot of issues that are fixed in WKWebView.

Hope this helps.

ashokseervidev · 2017-05-03T06:32:50Z

@pcstl

could you please provide examples?

joenoon · 2017-05-03T07:01:23Z

I ran into "Setting onMessage on a WebView overrides existing values of window.postMessage, but a previous value was defined" the other day using the awaitPostMessage trick.

What ended up working for me ended up being pretty simple:

Give your js an entrypoint function like main()
Add a ref to your WebView
in componentDidMount: this.webView.injectJavaScript('main()')

Dryymoon · 2017-05-03T07:57:12Z

"Setting onMessage on a WebView overrides existing values of window.postMessage, but a previous value was defined" - is normal usecase in DEV mode, but in PRODUCTION this check isnt running. Die to code https://github.com/facebook/react-native/blob/master/React/Views/RCTWebView.m#L283

Dryymoon · 2017-05-03T08:26:23Z

Maybe solve problem, but check for native code in RN: https://github.com/facebook/react-native/blob/master/React/Views/RCTWebView.m#L285
is Wrong, because

String(window.postMessage) === 'function () { [native code] }'

and

String(Object.hasOwnProperty).replace('hasOwnProperty', 'postMessage') === 'function postMessage() { [native code] }'

And it not equal

But
Try THIS code:

function awaitPostMessage() {
  var isReactNativePostMessageReady = !!window.originalPostMessage;
  var queue = [];
  var currentPostMessageFn = function store(message) {
    if (queue.length > 100) queue.shift();
    queue.push(message);
  };
  if (!isReactNativePostMessageReady) {
    var originalPostMessage = window.postMessage;
    Object.defineProperty(window, 'postMessage', {
      configurable: true,
      enumerable: true,
      get: function () {
        return currentPostMessageFn;
      },
      set: function (fn) {
        currentPostMessageFn = fn;
        isReactNativePostMessageReady = true;
        setTimeout(sendQueue, 0);
      }
    });
    window.postMessage.toString = function () {
      return String(originalPostMessage);
    };
  }

  function sendQueue() {
    while (queue.length > 0) window.postMessage(queue.shift());
  }
}

Usage:

awaitPostMessage(); // Call this only once in your Web Code.

/* After you can call window.postMessage many times, and as soon as RN Message Bridge is ready - messages delivered */
window.postMessage('Once :) ');
window.postMessage('Twice :) ');

Notice: In my code i limit queue for 100 message, fell free to increase this, or remove limit at all.

Noitidart · 2017-05-28T07:50:39Z

The solution @andreibarabas tested on Android works great for me on iOS.

How come we are going to so many extremes and not just using the postMessage.length method as @andreibarabas did? This one is so simple.

I load my webview with this:

<script>
    function whenRNPostMessageReady(cb) {
        if (postMessage.length === 1) cb();
        else setTimeout(function() { whenRNPostMessageReady(cb) }, 100);
    }
</script>

And usage of it:

<script>
    function whenRNPostMessageReady(cb) {
        if (postMessage.length === 1) cb();
        else setTimeout(function() { whenRNPostMessageReady(cb) }, 100);
    }


    whenRNPostMessageReady(function() {
        postMessage('hi react native!!!');
    });
</script>

farazs · 2017-06-06T02:49:03Z

Why was this closed? It hasn't been resolved and the current implementation is flawed requiring complex workarounds.

ghost · 2017-07-18T13:09:10Z

Just a quick note, @Dryymoon this code fails in Safari 9 :/

It generates an

Attempting to change configurable attribute of unconfigurable property.

error, any thoughts on fixing?

jjzazuet · 2017-11-19T01:52:46Z

Also, just to reiterate.

Placing comments inside the `injectedJavaScript` property of `WebView` breaks bridge communication on Android.

So don't do that I guess :P.

Noitidart · 2017-11-19T01:59:15Z

I verify @jjzazuet comment - comments work on iOS but not on Android - thanks for that

nirpeled · 2017-11-27T19:36:01Z

Can anyone please explain me why is it okay to do these "hacks" instead of just fixing RN's WebView so it won't override the global postMessage in a way that it's breaking the API? What am I missing here? Thanks!

andrew09 · 2017-11-30T18:47:50Z

I used @Dryymoon solution and it has worked really well. Experiencing some issues in ios9 but I am working on supporting that now. I will post an update with an updated solution.

vvavepacket · 2018-01-03T04:36:08Z

guys, do you have any idea why a webview post message back and forth in a release build is super slow yet fast in a debug build?

khanhtdbse · 2018-01-15T07:29:33Z

@Dryymoon
This method still works. Thank a lot.
But there a lot of tricky here 😢

mattbachman31 · 2018-01-19T01:36:38Z

@jqn We also ran into that issue on our app, and the fix that is in RN 0.53-rc here fixes issues on page load, but not on form submit. I filed a separate bug for this issue here if anyone else is dealing with that issue

willhlaw · 2018-01-19T19:50:33Z

I second @vvavepacket question. Why does webview post message seem much slower in production than in a debug build (at least in expo comparing development mode (~0.5s) vs production mode (>5s)?

Karasynth · 2018-03-22T12:28:32Z

@willhlaw @vvavepacket I am experience the same issue in production build. Any work around or update on this?

I am using react-native 0.54.2 and react-native-wkwebview-reborn 1.16.0

YusufHussein · 2018-05-21T21:57:47Z

apparently injected javascript code doesn’t work in android unless compressed (you can use this online tool http://javascriptcompressor.com/ )

Noitidart · 2018-05-21T23:41:10Z

@YusufHussein it doesn't have to be compressed. You just cannot use any comments.

YusufHussein · 2018-05-22T00:26:26Z

@Noitidart well I tried it without comments but it didn't work untill I compressed the code
I am using react native 0.54.2 and Android simulator 6.0 Marshmallow

stale · 2018-08-20T01:18:38Z

Hey there, it looks like there has been no activity on this issue recently. Has the issue been fixed, or does it still require the community's attention? This issue may be closed if no further activity occurs. You may also label this issue as "For Discussion" or "Good first issue" and I will leave it open. Thank you for your contributions.

kirillpisarev · 2018-08-21T12:48:48Z

Still no luck posting a message on document ready within a WebView page without a dirty hack, suggested above. Is any hope that the problem will be solved without this mess, cuz it exists for about 2.5 years...

function RNPostMessage(message) {
      if (window.postMessage.length === 1) window.postMessage(message);
      else setTimeout(RNPostMessage.bind(null, message), 100);
}

jamonholmgren · 2018-09-09T23:56:18Z

Migrated issue to react-native-webview/react-native-webview#5. This one can be closed.

vladikoff · 2018-11-06T17:30:29Z

Quick note about this fix for Android, if you used postMessage.length === 1 fix for your Android app, Chrome 70 (and maybe 69?) now reports postMessage.length as 1. So your app might be broken.

Use the [native code] fix or something like postMessage.toString().includes('__REACT_WEB_VIEW_BRIDGE')

dima11221122 mentioned this issue Mar 1, 2017

e.jsEvaluationValue is undefined scazzy/react-native-webview-autoheight#1

Merged

farazs mentioned this issue Mar 2, 2017

Remove errors for detecting native postMessage #10941

Closed

farazs mentioned this issue Apr 26, 2017

Use WKWebView instead of UIWebView #321

Closed

peixin closed this as completed Jun 6, 2017

kyle-ilantzis mentioned this issue Jun 13, 2017

[WebView] onMessage failing when there are JS warnings and errors on the page #10865

Closed

lesnitsky mentioned this issue Nov 20, 2017

Event call on Android but not on iOS lesnitsky/react-native-webview-messaging#17

Open

fchasen mentioned this issue Feb 21, 2018

Store original postMessage CRAlpha/react-native-wkwebview#112

Merged

hramos added the Component: WebView Related to the WebView component. label Mar 8, 2018

amandakelake mentioned this issue Jul 15, 2018

React+RN开发过程中的一些问题总结（持续更新。。。） amandakelake/blog#52

Open

henrylearn2rock mentioned this issue Jul 20, 2018

window.postMessage is not ready right away because of WKUserScriptInjectionTime atDocumentEnd CRAlpha/react-native-wkwebview#166

Closed

stale bot added the Stale There has been a lack of activity on this issue and it may be closed soon. label Aug 20, 2018

stale bot removed the Stale There has been a lack of activity on this issue and it may be closed soon. label Aug 21, 2018

jamonholmgren mentioned this issue Sep 9, 2018

MIGRATED: react native html postMessage can not reach to WebView (#11594) react-native-webview/react-native-webview#5

Closed

mrded mentioned this issue Sep 10, 2018

Replace react-native-autoheight-webview with WebView calvinkei/react-native-mathjax#13

Merged

hramos added the 🔶Components label Sep 21, 2018

kelset closed this as completed Sep 24, 2018

tuncaulubilge mentioned this issue Sep 24, 2018

fix: Ads not loading - Enqueue window post messages until it's ready newsuk/times-components#1349

Merged

facebook locked as resolved and limited conversation to collaborators Nov 6, 2018

react-native-bot added the Resolution: Locked This issue was locked by the bot. label Dec 11, 2019

react native html postMessage can not reach to WebView #11594

react native html postMessage can not reach to WebView #11594

Comments

peixin commented Dec 22, 2016

anttu commented Jan 8, 2017 • edited Loading

farazs commented Jan 11, 2017

Dryymoon commented Jan 24, 2017 • edited Loading

sylvainbaronnet commented Jan 27, 2017

artdevgame commented Jan 29, 2017

jqn commented Jan 31, 2017 • edited Loading

gp3gp3gp3 commented Feb 8, 2017

andreibarabas commented Feb 21, 2017

farazs commented Mar 1, 2017

doxiaodong commented Mar 15, 2017 • edited Loading

farazs commented Apr 11, 2017

kyle-ilantzis commented Apr 12, 2017

chriscohoat commented Apr 21, 2017

shenlq commented Apr 27, 2017

kyle-ilantzis commented Apr 27, 2017

ashokseervidev commented May 2, 2017 • edited Loading

coproduto commented May 2, 2017

farazs commented May 2, 2017

ashokseervidev commented May 3, 2017

joenoon commented May 3, 2017

Dryymoon commented May 3, 2017

Dryymoon commented May 3, 2017 • edited Loading

Noitidart commented May 28, 2017 • edited Loading

farazs commented Jun 6, 2017

ghost commented Jul 18, 2017

jjzazuet commented Nov 19, 2017

Placing comments inside the injectedJavaScript property of WebView breaks bridge communication on Android.

Noitidart commented Nov 19, 2017 • edited Loading

nirpeled commented Nov 27, 2017

andrew09 commented Nov 30, 2017

vvavepacket commented Jan 3, 2018

khanhtdbse commented Jan 15, 2018

mattbachman31 commented Jan 19, 2018

willhlaw commented Jan 19, 2018

Karasynth commented Mar 22, 2018

YusufHussein commented May 21, 2018

Noitidart commented May 21, 2018

YusufHussein commented May 22, 2018

stale bot commented Aug 20, 2018

kirillpisarev commented Aug 21, 2018

jamonholmgren commented Sep 9, 2018

vladikoff commented Nov 6, 2018

anttu commented Jan 8, 2017 •

edited

Loading

Dryymoon commented Jan 24, 2017 •

edited

Loading

jqn commented Jan 31, 2017 •

edited

Loading

doxiaodong commented Mar 15, 2017 •

edited

Loading

ashokseervidev commented May 2, 2017 •

edited

Loading

Dryymoon commented May 3, 2017 •

edited

Loading

Noitidart commented May 28, 2017 •

edited

Loading

Placing comments inside the `injectedJavaScript` property of `WebView` breaks bridge communication on Android.

Noitidart commented Nov 19, 2017 •

edited

Loading