-
Notifications
You must be signed in to change notification settings - Fork 3k
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
postMessage works on emulator but not on phone #221
Comments
i'm not sure, I have a Oneplus 3T and everything is fine. Can you give me any more informations ? |
Bad news, it's not only One Plus 5T. I've tried with Galaxy S8 and it's the same. Edit: Changed the example a little bit to DOMContentLoaded just in case import React, {Component} from 'react';
import {WebView} from 'react-native-webview';
const page = `
<html>
<head>
<script>
function whenRNPostMessageReady(cb) {
if(postMessage.length === 1) {
cb();
} else {
setTimeout(function() {
whenRNPostMessageReady(cb);
}, 1000);
}
}
document.addEventListener("DOMContentLoaded", function(event) {
try {
whenRNPostMessageReady(function() {
window.postMessage('test-data-as-string', '*');
});
}
catch(err) {
document.getElementById('errr').innerHTML = err.message;
}
});
</script>
</head>
<body>
<div id='errr'>...</div>
</body>
</html>`;
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<WebView
onMessage = {(e) => console.warn(e.nativeEvent.data)}
source = {{html: page}}
/>
);
}
} |
Can you try window.postMessage('test-data-as-string', '*'); ? EDIT: added docs |
Already did. Doesn't work either.
…On Wed, 2 Jan 2019, 17:11 Thibault Malbranche ***@***.*** wrote:
Can you try window.postMessage('test-data-as-string', '*'); ?
—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHub
<#221 (comment)>,
or mute the thread
<https://github.com/notifications/unsubscribe-auth/AANq8NDyQHR8VK1hGOLBF21J7o4Kq1QVks5u_L4ngaJpZM4Zk9mZ>
.
|
Changed the example to window.postMessage('data', '*') as well to avoid confusion. Edit: At this point I'm confident that this has nothing to do with the example itself but it's a legit bug. Can we change the label from 'question' to something more appropriate? |
I've been able to reproduce the issue with your code. But the thing is it's working perfectly fine inside my app and I do a lot of postMessage stuff. So I'm a bit confused. Here's how I do:
Then to send to web (web is free to listen by overriding window.WebViewBridge.onMessage):
And web can send stuff to native by:
|
Unfortunately your example doesn't work for me at all. Not even in emulator. I've noticed you didn't the the workaround delay thing where RN-Webview bridge is not live yet. But even then it doesn't fire up a message for me. Here is how I've tried to run it. import React, {Component} from 'react';
import {WebView} from 'react-native-webview';
const page = `
<html>
<head>
<script>
(function() {
window.WebViewBridge = {
onMessage: function() {
return null;
},
send: function(data) {
window.postMessage(data, '*');
},
};
var event = new Event('WebViewBridge');
window.dispatchEvent(event);
})();
document.addEventListener('DOMContentLoaded', function(event) {
try {
window.WebViewBridge.send('test-data');
}
catch(err) {
document.getElementById('errr').innerHTML = err.message;
}
});
</script>
</head>
<body>
<div id='errr'>...</div>
</body>
</html>`;
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<WebView
onMessage = {(e) => console.warn(e.nativeEvent.data)}
source = {{html: page}}
/>
);
}
} |
I do, just did not post it.
and receiveMessageFromWebViewBridge is my custom message handler for the web
|
Had to use react-native-webview-bridge for now which is using an older version of WebView. Hoping this gets fixed soon. Maybe a common working client side JS should be injected by default before everything else. Leaving this open. Let me know if you want me to test something. |
@tapir I've replicated the problem using your steps as well. Made this a bug. If anyone wants to tackle it, there's a good replication step posted above. |
Well we are already working on postMessage implementation, as we now the current implementation is really bad. #104 |
Could it be that |
tried with |
You can also try this:
This always waits for 2 seconds after the page has loaded. |
How does that help? Initial example waits as much as necessary. It's recursive. |
They are not the same, because some Chrome versions might report |
That why I've tried |
Didn't work unfortunately |
This comment has been minimized.
This comment has been minimized.
…entation (#303) fixes #29 fixes #272 fixes #221 fixes #105 fixes #66 BREAKING CHANGE: Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way. Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data). Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that: const injectedJavascript = `(function() { window.postMessage = function(data) { window.ReactNativeWebView.postMessage(data); }; })()`; Huge thanks to @jordansexton and @KoenLav!
# [5.0.0](v4.1.0...v5.0.0) (2019-02-01) ### Features * **Android/iOS postMessage:** refactoring the old postMessage implementation ([#303](#303)) ([f3bdab5](f3bdab5)), closes [#29](#29) [#272](#272) [#221](#221) [#105](#105) [#66](#66) ### BREAKING CHANGES * **Android/iOS postMessage:** Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way. Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data). Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that: const injectedJavascript = `(function() { window.postMessage = function(data) { window.ReactNativeWebView.postMessage(data); }; })()`; Huge thanks to @jordansexton and @KoenLav!
🎉 This issue has been resolved in version 5.0.0 🎉 The release is available on: Your semantic-release bot 📦🚀 |
Works like a charm! |
@tapir Any chance you could share your generateMessage function? We are currently running into the same issue where it works perfectly in the simulator but not on the phone deploys. |
@koofka I'm directly using the |
@tapir Yep we added those fixes, Im wondering about the other direction for messaging into the webview. The only code that has worked for that so far for us has been :
and then a corresponding window listener in the webview |
Ah sorry, I've used it like this in my app
and like below in the html served by webview
|
interesting. Thanks for the help will give it a shot. |
…entation (react-native-webview#303) fixes react-native-webview#29 fixes react-native-webview#272 fixes react-native-webview#221 fixes react-native-webview#105 fixes react-native-webview#66 BREAKING CHANGE: Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way. Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data). Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that: const injectedJavascript = `(function() { window.postMessage = function(data) { window.ReactNativeWebView.postMessage(data); }; })()`; Huge thanks to @jordansexton and @KoenLav!
# [5.0.0](react-native-webview/react-native-webview@v4.1.0...v5.0.0) (2019-02-01) ### Features * **Android/iOS postMessage:** refactoring the old postMessage implementation ([react-native-webview#303](react-native-webview#303)) ([f3bdab5](react-native-webview@f3bdab5)), closes [react-native-webview#29](react-native-webview#29) [react-native-webview#272](react-native-webview#272) [react-native-webview#221](react-native-webview#221) [react-native-webview#105](react-native-webview#105) [react-native-webview#66](react-native-webview#66) ### BREAKING CHANGES * **Android/iOS postMessage:** Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way. Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data). Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that: const injectedJavascript = `(function() { window.postMessage = function(data) { window.ReactNativeWebView.postMessage(data); }; })()`; Huge thanks to @jordansexton and @KoenLav!
# [5.0.0](react-native-webview/react-native-webview@v4.1.0...v5.0.0) (2019-02-01) ### Features * **Android/iOS postMessage:** refactoring the old postMessage implementation ([#303](react-native-webview/react-native-webview#303)) ([f3bdab5](react-native-webview/react-native-webview@f3bdab5)), closes [#29](react-native-webview/react-native-webview#29) [#272](react-native-webview/react-native-webview#272) [#221](react-native-webview/react-native-webview#221) [#105](react-native-webview/react-native-webview#105) [#66](react-native-webview/react-native-webview#66) ### BREAKING CHANGES * **Android/iOS postMessage:** Communication from webview to react-native has been completely rewritten. React-native-webview will not use or override window.postMessage anymore. Reasons behind these changes can be found throughout so many issues that it made sense to go that way. Instead of using window.postMessage(data, *), please now use window.ReactNativeWebView.postMessage(data). Side note: if you wish to keep compatibility with the old version when you upgrade, you can use the injectedJavascript prop to do that: const injectedJavascript = `(function() { window.postMessage = function(data) { window.ReactNativeWebView.postMessage(data); }; })()`; Huge thanks to @jordansexton and @KoenLav!
Above is my script block in the page I'm viewing from webview which is defined as below:
<WebView ref = {(ref) => {this.webViewRef = ref;}} startInLoadingState = {true} scrollEnabled = {false} useWebKit = {true} onMessage = {(e) => console.warn(e.nativeEvent.data)} source = {{uri: 'http://my-page-url'}} />
Works perfectly in emulator but does not work nor gives any error on my One Plus 5T (Oreo)
Any ideas?
The text was updated successfully, but these errors were encountered: