onNavigationStateChange is not working with my WebView URL which in Angular
It only gives the URL of the first-time (main-URL) loading wherever I click or want to navigate on any other pages, which should be different.For the SPA
<WebView
originWhitelist={['*']}
ref={c => this._webview = c}
source={{ uri: this.props.url }}
dataDetectorTypes={'all'}
onNavigationStateChange={this._onNavigationStateChange.bind(this)}
onLoadStart={this._webLoadStart.bind(this)}
onLoadEnd={this._webLoadEnd.bind(this)}
onError={this._webLoadError.bind(this)}
javaScriptEnabled={true}
domStorageEnabled={true}
allowUniversalAccessFromFileURLs={true}
/>
react-native
asked Nov 26 '18 at 6:58
preshita sonipreshita soni
134
add a comment |
It only gives the URL of the first-time (main-URL) loading wherever I click or want to navigate on any other pages, which should be different.For the SPA
<WebView
originWhitelist={['*']}
ref={c => this._webview = c}
source={{ uri: this.props.url }}
dataDetectorTypes={'all'}
onNavigationStateChange={this._onNavigationStateChange.bind(this)}
onLoadStart={this._webLoadStart.bind(this)}
onLoadEnd={this._webLoadEnd.bind(this)}
onError={this._webLoadError.bind(this)}
javaScriptEnabled={true}
domStorageEnabled={true}
allowUniversalAccessFromFileURLs={true}
/>
react-native
asked Nov 26 '18 at 6:58
preshita sonipreshita soni
134
add a comment |
It only gives the URL of the first-time (main-URL) loading wherever I click or want to navigate on any other pages, which should be different.For the SPA
<WebView
originWhitelist={['*']}
ref={c => this._webview = c}
source={{ uri: this.props.url }}
dataDetectorTypes={'all'}
onNavigationStateChange={this._onNavigationStateChange.bind(this)}
onLoadStart={this._webLoadStart.bind(this)}
onLoadEnd={this._webLoadEnd.bind(this)}
onError={this._webLoadError.bind(this)}
javaScriptEnabled={true}
domStorageEnabled={true}
allowUniversalAccessFromFileURLs={true}
/>
react-native
asked Nov 26 '18 at 6:58
preshita sonipreshita soni
134
It only gives the URL of the first-time (main-URL) loading wherever I click or want to navigate on any other pages, which should be different.For the SPA
<WebView
originWhitelist={['*']}
ref={c => this._webview = c}
source={{ uri: this.props.url }}
dataDetectorTypes={'all'}
onNavigationStateChange={this._onNavigationStateChange.bind(this)}
onLoadStart={this._webLoadStart.bind(this)}
onLoadEnd={this._webLoadEnd.bind(this)}
onError={this._webLoadError.bind(this)}
javaScriptEnabled={true}
domStorageEnabled={true}
allowUniversalAccessFromFileURLs={true}
/>
react-native
react-native
asked Nov 26 '18 at 6:58
preshita sonipreshita soni
134
asked Nov 26 '18 at 6:58
preshita sonipreshita soni
134
edited Nov 26 '18 at 10:35
preshita soni
asked Nov 26 '18 at 6:58
preshita sonipreshita soni
134
asked Nov 26 '18 at 6:58
preshita sonipreshita soni
134
asked Nov 26 '18 at 6:58
preshita sonipreshita soni
134
134
add a comment |
add a comment |
1 Answer
1
active
oldest
votes
The SPA applications don't trigger a onLoad event, so the navigationState only captures the first loaded url. You need to inject a custom javascript in your WebView that notifies the React Native app of the url change.
I would suggest the following:
If the angular app is controlled by you, then have it send a message using window.postMesssage every time the url changes.
something like this:
// create the function to notify React in your angular app
window.notifyReact = function(data, type){
if(window && window.postMessage) {
window.postMessage({data:data, type:type});
}
}
// use the function on every route change in your angular app
notifyReact({newUrl: "https://somenewurl/with-new-params"}, "URL_CHANGE")
then in your react native app, listen for messages in your WebView:
<WebView
...yourOtherProps
onMessage={e => {
const data = e && e.nativeEvent.data ? e.nativeEvent.data.data : null;
//print the data coming from the angular app to the console, data.newUrl should have the new url
console.log("data from angular app:", data);
}
}
/>
If the angular app is not controlled by you, then your best bet is to follow a similar approach with the above code by injecting a javascript when the WebView loads inside your react native app and have it intercept the url/hash changes or changes coming from window.history.pushState/popState.
Good luck!
answered Nov 26 '18 at 13:34
needsleepneedsleep
1,186310
add a comment |
Your Answer
StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");
StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);
StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});
function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});
}
});
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53476080%2fonnavigationstatechange-is-not-working-with-my-webview-url-which-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
1 Answer
1
active
oldest
votes
1 Answer
1
active
oldest
votes
active
oldest
votes
active
oldest
votes
The SPA applications don't trigger a onLoad event, so the navigationState only captures the first loaded url. You need to inject a custom javascript in your WebView that notifies the React Native app of the url change.
I would suggest the following:
If the angular app is controlled by you, then have it send a message using window.postMesssage every time the url changes.
something like this:
// create the function to notify React in your angular app
window.notifyReact = function(data, type){
if(window && window.postMessage) {
window.postMessage({data:data, type:type});
}
}
// use the function on every route change in your angular app
notifyReact({newUrl: "https://somenewurl/with-new-params"}, "URL_CHANGE")
then in your react native app, listen for messages in your WebView:
<WebView
...yourOtherProps
onMessage={e => {
const data = e && e.nativeEvent.data ? e.nativeEvent.data.data : null;
//print the data coming from the angular app to the console, data.newUrl should have the new url
console.log("data from angular app:", data);
}
}
/>
If the angular app is not controlled by you, then your best bet is to follow a similar approach with the above code by injecting a javascript when the WebView loads inside your react native app and have it intercept the url/hash changes or changes coming from window.history.pushState/popState.
Good luck!
answered Nov 26 '18 at 13:34
needsleepneedsleep
1,186310
add a comment |
The SPA applications don't trigger a onLoad event, so the navigationState only captures the first loaded url. You need to inject a custom javascript in your WebView that notifies the React Native app of the url change.
I would suggest the following:
If the angular app is controlled by you, then have it send a message using window.postMesssage every time the url changes.
something like this:
// create the function to notify React in your angular app
window.notifyReact = function(data, type){
if(window && window.postMessage) {
window.postMessage({data:data, type:type});
}
}
// use the function on every route change in your angular app
notifyReact({newUrl: "https://somenewurl/with-new-params"}, "URL_CHANGE")
then in your react native app, listen for messages in your WebView:
<WebView
...yourOtherProps
onMessage={e => {
const data = e && e.nativeEvent.data ? e.nativeEvent.data.data : null;
//print the data coming from the angular app to the console, data.newUrl should have the new url
console.log("data from angular app:", data);
}
}
/>
If the angular app is not controlled by you, then your best bet is to follow a similar approach with the above code by injecting a javascript when the WebView loads inside your react native app and have it intercept the url/hash changes or changes coming from window.history.pushState/popState.
Good luck!
answered Nov 26 '18 at 13:34
needsleepneedsleep
1,186310
add a comment |
The SPA applications don't trigger a onLoad event, so the navigationState only captures the first loaded url. You need to inject a custom javascript in your WebView that notifies the React Native app of the url change.
I would suggest the following:
If the angular app is controlled by you, then have it send a message using window.postMesssage every time the url changes.
something like this:
// create the function to notify React in your angular app
window.notifyReact = function(data, type){
if(window && window.postMessage) {
window.postMessage({data:data, type:type});
}
}
// use the function on every route change in your angular app
notifyReact({newUrl: "https://somenewurl/with-new-params"}, "URL_CHANGE")
then in your react native app, listen for messages in your WebView:
<WebView
...yourOtherProps
onMessage={e => {
const data = e && e.nativeEvent.data ? e.nativeEvent.data.data : null;
//print the data coming from the angular app to the console, data.newUrl should have the new url
console.log("data from angular app:", data);
}
}
/>
If the angular app is not controlled by you, then your best bet is to follow a similar approach with the above code by injecting a javascript when the WebView loads inside your react native app and have it intercept the url/hash changes or changes coming from window.history.pushState/popState.
Good luck!
answered Nov 26 '18 at 13:34
needsleepneedsleep
1,186310
The SPA applications don't trigger a onLoad event, so the navigationState only captures the first loaded url. You need to inject a custom javascript in your WebView that notifies the React Native app of the url change.
I would suggest the following:
If the angular app is controlled by you, then have it send a message using window.postMesssage every time the url changes.
something like this:
// create the function to notify React in your angular app
window.notifyReact = function(data, type){
if(window && window.postMessage) {
window.postMessage({data:data, type:type});
}
}
// use the function on every route change in your angular app
notifyReact({newUrl: "https://somenewurl/with-new-params"}, "URL_CHANGE")
then in your react native app, listen for messages in your WebView:
<WebView
...yourOtherProps
onMessage={e => {
const data = e && e.nativeEvent.data ? e.nativeEvent.data.data : null;
//print the data coming from the angular app to the console, data.newUrl should have the new url
console.log("data from angular app:", data);
}
}
/>
If the angular app is not controlled by you, then your best bet is to follow a similar approach with the above code by injecting a javascript when the WebView loads inside your react native app and have it intercept the url/hash changes or changes coming from window.history.pushState/popState.
Good luck!
answered Nov 26 '18 at 13:34
needsleepneedsleep
1,186310
answered Nov 26 '18 at 13:34
needsleepneedsleep
1,186310
answered Nov 26 '18 at 13:34
needsleepneedsleep
1,186310
answered Nov 26 '18 at 13:34
needsleepneedsleep
1,186310
1,186310
add a comment |
add a comment |
Thanks for contributing an answer to Stack Overflow!
- Please be sure to answer the question. Provide details and share your research!
But avoid …
- Asking for help, clarification, or responding to other answers.
- Making statements based on opinion; back them up with references or personal experience.
To learn more, see our tips on writing great answers.
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53476080%2fonnavigationstatechange-is-not-working-with-my-webview-url-which-in-angular%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
