I'm facing issue react-native-webview . The issue is like opening app initial I have set URL in state but when the new URL comes up from push notification then its not updating the webview even after updating the state.
Please help me if any one has the solution for the same.
Define a reference for webview like given below and call
webViewRef.reload(), when you want to reload the webview
<WebView
ref={(ref) => {
this.webViewRef = ref
}}
/>
try this way, by adding a timestamp to URL
this.setState({
url: DEFAULT_URL + '?t='+ Date.now()
});
Related
I'm working on an app with a custom url scheme.
It is opening some webpage for authentication in a chrome tab. This is done in xamarin forms like this:
Browser.OpenAsync(apiUrl + "mobile", new BrowserLaunchOptions
{
LaunchMode = BrowserLaunchMode.SystemPreferred,
TitleMode = BrowserTitleMode.Hide,
});
everything work as expected if I return a webpage with a link and click the the link manually:
Click here to go the app
But if i return a 302 redirect to the same url it will not close the chrome tab and dont focus the app again.
If i add a javascript in the response, it will not automatically open the url (close the chrome tab and focus the app)
I've tried things like this:
window.location = url;
window.open(url,'_self');
setTimeout(()=>window.open(url,'_self'),10);
(url is a valid variable, even tried alert(url) after changing the location and it show the correct url.
Why does it only work when I click the link manually?
In order to maintain the user's security and experience, the browser prohibits the direct use of window.open(URL) in JS to open new links.
Try to change like below:
setTimeout(()=>window.open(url,'_self'),500); //The delay time must not be too short or you will be intercepted
I am quite new to React-native. The href tag in HTML opens the website within the app. I wish to have it open the link in the default browser of the mobile phone/device. Oh and I use snack.expo.
In APP a website is being loaded. Within my website I use <a href> 'http://maps.google.com/?q=...' I wish to have the default browser of a mobile phone to open this link in its default browser, same goes for other href links.
Of course only links with target="_blank" should be opened in the default browser.
It would be even more awesome if app's can be opened.
I have searched google a lot, but without success.
Anyone who knows how to do this? Or is it simply not available, yet?
Within my HTML code I've tried this:
{address}
Part of react native code:
return (
<WebView
source={{ uri: '{website}' }}
/>
);
Best regards
It is definitely possible in react native. You can do it as follows:
import {Linking} from "react-native"
<WebView
source={{uri:"https://mashupguide.net/1.0/html/ch02s05.xhtml"}}
onShouldStartLoadWithRequest={request => {
let url = request.url;
if (url.includes("http://maps.google.com/")) {
Linking.openURL(url);
return false
} else {
return true
}
}}
/>
This will prevent the WebView from browsing to the next page and instead open the phone's default browser.
reference: https://github.com/react-native-community/react-native-webview/blob/master/docs/Reference.md#onshouldstartloadwithrequest
working example: https://snack.expo.io/#ammarahmed/sadistic-almond
I'm using cordova to open a remote url inside my app. My problem is that I obtain a blank screen during the few secondsof content loading.
Is there a way to "hide" the browser view during the time it finishes to load the content ?
Thank you
There is hidden parameter:
var options = "location=yes,hidden=yes";
inAppBrowserRef = cordova.InAppBrowser.open(url, target, options);
addEventListener('loadstop', loadStopCallBack);
function loadStopCallBack() {
inAppBrowserRef.show();
}
See the plugin docs for example details.
In a phonegap-android application i want to open an external link within the application.
For this i used a plugin childBrowser and it works fine.
But the external link is taking time to load for which i want to show a wait/loading message.
I also tried to open the external link through ajax-call, updating the div with the response page. and until reponse is not received i am showing a loading message but the problem with this approach is that page loses its styles and other structure.
I guess this is because i am putting entire external page inside the div tag which cannot render the entire page as the browser can do it.
Code snippet looks like-
<script type="text/javascript">
function loadPage(url) {
var xmlhttp = new XMLHttpRequest();
// Callback function when XMLHttpRequest is ready
xmlhttp.onreadystatechange=function(){
if (xmlhttp.readyState === 4){
if (xmlhttp.status === 200) {
document.getElementById('container').innerHTML = xmlhttp.responseText;
}
}
};
xmlhttp.open("GET", url , true);
xmlhttp.send();
}
</script>
How can i achieve this, can I override childBrowser?
Also
if i want to open the page in applications' web view then how can i achieve the same for web-view.
EDIT: As per Same origin policy one cannot call to a outside domain using xhr request.
Okay understood. i checked in browser and got expected error: 'XMLHttpRequest cannot load'
But then how does it shows/opens the url in mobile?
Ofcourse the page is not fully functional and thats my original issue.
i would post this as a separate question, but its related to my original question
Thanx.
Any hints/suggestions would be great.
I want to open a url(ex. www.google.com) in jquery mobile android app.
I want to open it with in the context of the app itself. i dont want to open a diffrent browser to launch it on the click of the link or button. i want to open it with in the app.
is it possible.
Thanks.
Found the solution here:
function openInWebView(url)
{
var anchor = document.createElement('a');
anchor.setAttribute('href', url);
var dispatch = document.createEvent('HTMLEvents')
dispatch.initEvent('click', true, true);
anchor.dispatchEvent(dispatch);
}
Then call the function like this in your app:
openInWebView('http://google.com')