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
Related
I'm developing a project for an app that will display my react app in a webview.
ReactJS app works perfectly in webview, that is why I assume JS is activated in webview.
But, I'm trying to display a base64 encoded HTML content which I'm trying to display as follows;
<iframe src={`data:text/html;base64,${HtmlContent}`}/>
This approach works fine in the browser (Chrome), but it's not working at all in the webview.
I used srcdoc instead of src. But then I cannot postMessage to parent ReactJS app.
Is there a way to work with srcdoc in this scenario or what could be the problem with the iframe when in webview?
Unfutenally I couldn't manage to work with this approach.
But, since I can control both and of the iframe, simply I created a function in the parent of the iFrame as follows;
useEffect(() => {
// Only create once
// Create a custom function and put it to the window object
window.handleResult = handler;
}, [])
Then access it from inside of the iFrame with;
<script type="text/javascript">
window.top.handleResult({success: params.success, error: params.error})
</script>
This approach worked better actually. If you need one more nested iframe for some reason, you can get this function no matter how deep it is because, iframe content geting "top" window anyway.
I'm sharing this because this problem can be solve with different aproches. Maybe not the best way but it'i a working way.
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'm having what seems to be a pretty small issue in the Phonegap 1.3.0 application I am working on. It is for Android devices.
The problem is stemming from the ads I am trying to incorporate into my app. I am trying t use Leadbolt's no-SDK offer wall as well as their banner ads.
I am loading the offer wall within an iframe in my app, inside of a hidden DIV, and then displaying it when required - this part is working great.
The problem comes when I click on one of the links on the offer wall: instead of launching the clicked URL in a new External/Native browser, the link is being opened within the iframe. The same thing happens when someone clicks the banners, though these are integrated by inserting a in the location you want the ad to show rather than via an iframe. (Maybe the script injects an iframe, dunno, the end behavior is the same)
What I'm trying to do now is to implement a method in Java to catch any clicks, and open a new browser if the link is not relative/local - i.e. if it is prefixed by "http", "https", or "market" protocols
And here lies the real issue - the only experience I have with Java has been messing with Phoengap a bit :(
I have been reading and testing things all day, but finally I must resort to asking those of you who are more knowledgeable than I am in regards to Java programming.
Here is what I have been attempting so far:
package com.phonegap.my_great_app;
import android.os.Bundle;
import android.webkit.WebView;
import com.phonegap.*;
public class MyGreatApp extends DroidGap {
#Override
public void onCreate(Bundle savedInstanceState) {
super.onCreate(savedInstanceState);
super.loadUrl("file:///android_asset/www/index.html");
/* Intercept clicked links, and open external URLs in external browser */
public boolean shouldOverrideUrlLoading(DroidGap super, String url) {
if (url != null && url.startsWith("market://") || url.startsWith("http://") || url.startsWith("https://")) {
/* Open new WebView or external browser with URL */
/* Do it here */
Uri uri = Uri.parse(url);
Intent intent = new Intent(Intent.ACTION_VIEW, uri);
startActivity(intent);
} else {
/* Do nothing, it's relative URL from my app */
return false;
}
}
}
}
I am sure this code is laughably wrong, but hopefully it can illustrate what I'm trying to achieve here. Truth be told, I have no idea if shouldOverrideUrlLoading() is even the right method to be calling for this problem!
I will be very grateful for any advice or code samples you can offer! Thanks :)
EDIT: Just to be clear - I cannot alter the iframe source code so javascript or changing the link targets is not an option due to XSS issues.
You can open external links in the default browser instead of opening inside your phonegap application. This can be done in two ways easily.
One is by using Phonegap medthod like this,
navigator.app.loadUrl('http://stackoverflow.com');
/*NOTE : In some phonegap versions it does not works*/
Another way is using jquery mobile, you can do like this,
YouTube Channel
Thats all.
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')