Opening all outside-app links in a system browser - javascript

I have an Ionic 1 app which includes Google Maps via the ngMap directive. This works great.
What doesn't work great is when the user clicks on the "Credits" element in the map and the entire app is redirected away to the Google map credits page- and because it's an Ionic app, there is no way for the user to go back.
Is there a way in Ionic / Angular (not jQuery) to intercept arbitrary links like these so that they open in an in-app or system browser?

Usually it is done as follows:
http://codepen.io/anon/pen/MpgrdN
function isExternal(href) {
return true;
}
document.body.addEventListener('click', function(e) {
var maybeA = $(e.target).closest('a');
if (maybeA.length && isExternal(maybeA[0].getAttribute('href'))) {
// window.open()
console.log('prevented');
e.preventDefault();
}
});
Used jQuery closest function, if no jQuery on page standalone implementation is here DOM / pure JavaScript solution to jQuery.closest() implementation?

Related

How to create youtube auto-subscription link that works for mobile?

I would like to create a youtube auto-subscription link, that works in mobile. I thought it will work out if the link is opened in browser, instead of youtube app.
But I tried that, it is not working. Any ideas?
The idea behind it, is I want to convert my website visitors to youtube subscribers.
My website is a wordpress website. Maybe it can be done by using javascript?
jQuery(document).ready(function( $ ){
var canClick = true;
var count=0;
$("body").click(function () {
if (canClick) {
if(count){
window.open("https://www.youtube.com/channel/example?sub_confirmation=1").blur();
window.focus();}
count=count+1;
canClick = false;
setTimeout(() => {
canClick = true
}, 8000);
}
});
});
I tried to include this js file before body closes in wordpress. It didn't work.
If you are opening a YouTube link on a mobile that has the YouTube app installed it goes directly inside the app. This behaviour is intended and it's client-side. A bit like using mailto: will open a link in a mail client.
So I cannot think of a way to force YouTube to use the browser without YouTube providing this. E.g. a link to a special subdomain that does not switch to the app - but as far as I know there is no such link provided by YouTube.
From (I think) iOS10 onwards and on Android the user can actively choose to open the link in a browser window, bu that's nothing you can control via JavaScript or any other web technology.

How to Disable Text to speech Using Javascript?

I have created a Samsung smart-tv app using javascript and now I want to disable the TTS in this app but don't know how I can do this please help.
I have tried using window.speechSynthesis but it is not working don't know why.
currently what i have done is when window load i call an init() function
function init(){
if ('speechSynthesis' in window) {
var synthesis = window.speechSynthesis;
synthesis.cancel();
} else {
console.log('Text-to-speech not supported.');
}
}
but it does not work and so finally i want to disable the feature of Text to speech from my application
You can't disable that feature. The SpeechSynthesis api is if you want to add extra functionality, not for disabling the native feature (which can only be disabled by users of your app from the TV/browser settings).
As written here: https://developer.samsung.com/smarttv/develop/legacy-platform-library/tv-functionality/accessibility.html
If user turns on Accessibility option for TTS in menu, TTS will read contents of HTML elements automatically.
You can try 2 things (which might not work):
Run every 1s (or more often) speechSynthesis.cancel() in a setInterval (I'm not sure this will stop the native TTS of the TV though).
setInterval(() => window.speechSynthesis.cancel(), 1000)
Replace window.speechSynthesis.speak with an empty function at the beginning of your app (considering Samsung TV uses this for speaking).
window.speechSynthesis.speak = () => {}
Please have a good reason to do so, disabling voice over is never a good choice. You are basically removing access to people with visual impairments and even if you did a bad job at making your app accessible that will always be better than just disabling it.
Having said that, there's no way to disable voice over using javascript but you can disable it by adding the following tag inside <widget> in your config.xml file:
<tizen:metadata key="http://samsung.com/tv/metadata/use.voiceguide" value="false" />

How to show select-app dialog through Javascript?

I'm working with an android wrapped app (using web viewer), and I would like to ask the user which app wants to use when pressing in address from my app.
Example pop-up in android (Spanish): https://puu.sh/EEXBK/388b01494d.png
I have tried using the google API launcher which is: https://www.google.com/maps/dir/?api=1&origin=xxx&destination=xxx&travelmode=driving
But this opens directly maps, without asking if you want to use Waze or not.
It is possible with Javascript?
My targets are Maps and Waze.
Any suggestions?
Thanks.
check this document for opening waze and for google map check this
you can create url for each one
example waze:
https://www.waze.com/ul?ll=40.75889500%2C-73.98513100&navigate=yes&zoom=17
example google maps:
https://www.google.com/maps/#?api=1&map_action=map&center=-33.712206,150.311941&zoom=12&basemap=terrain
You can use these URLs:
appleURL = "http://maps.apple.com/?daddr=\(latitude),\(longitude)"
googleURL = "comgooglemaps://?daddr=\(latitude),\(longitude)&directionsmode=driving"
wazeURL = "waze://?ll=\(latitude),\(longitude)&navigate=false"
For more see this link

How to detect cordova iOS WebView navigation events

As per cordova iOS WebView Guide you can embed web views in iOS.
According to that you can do
<content src="http://apache.org" />
with the definition of
CDVViewController* viewController = [CDVViewController new];
I am wondering if there is a way to detect if that content source navigated to another site by clicking the link and if there is way how to get the new URL ?
CDVViewController is the one referenced but I can't tell by inspecting as to how one would accomplish that.
A slight parallel to that is Microsoft's x-ms-webview which at DOM level allows me to do this:-
var webView = document.getElementByTag("x-ms-webview");
webView.addEventListener("MSWebViewNavigationCompleted", function (arg) {
if (arg.uri.match(/something)) {
doSomething();
}
});
Another example in iOS but just for loading initial page.
How do detect navigations inside WebView in Cordova iOS ?
Cordova post CDVPageDidLoadNotification when the page is loaded.
You can listen for it with
[[NSNotificationCenter defaultCenter] addObserver:self selector:#selector(pageDidLoad:) name:CDVPageDidLoadNotification object:self.webView];

Google navigation using javascript in Cordova/Phonegap

I am using cordova application of telerik appbuilder based on HTML, javascript and css with Google Maps API v3 developing app for iOS and android.
I have 2 points A and B each having different latitude and longitude for which, I am able to show a path to move from A to B on map using Google API.
Now I want to do navigation from A to B in the app itself.
I don't want to open the native app for map available in ios or android.
I don't know how can I do this navigation from A to B? As its a real time app which will show my current location. For navigation it will show my current location starting from A and will move according to my current location up to B.
Hope someone can let me know any good solution.
I don't understand why you wouldn't want to use the native navigation app to do the navigating. To do this within your own app, you will have to effectively write your own version of Google Navigator/Apple Maps and embed it within your app, because there's no mechanism by which the native navigation app functionality can be embedded inside your app.
It's a much easier solution to pass location A & B to the native navigation app - this cordova/phonegap plugin will allow you to do this.
Another alternative is to display the navigation directions using the google maps website in the cordova child browser; that way the user isn't leaving your app:
window.plugins.ChildBrowser.showWebPage('https://www.google.com/maps?saddr=' + latA + ',' + lonA + '&daddr=' + latB + ',' + lonB + '', {
showLocationBar: true
});
Thanks for the reply.
I have implemented the navigation using the given link below-
https://github.com/dpa99c/phonegap-launch-navigator/
I have given the code as shown below for this.
launchnavigator.navigate("aSourceAddress", "bDestinationAddress",
function () {
alert("plugin success map");
},
function (error) {
alert("plugin error: " + error);
},
{
preferGoogleMaps: true,
urlScheme: "TestMap2",
backButtonText: "TestMap2"
});
Its switching to google maps app and navigating perfectly.
But after we reach to destination, it does not come back to our app automatically.
I have also used custom URL plugin as available from- https://github.com/Telerik-Verified-Plugins/Custom-URL-scheme

Categories

Resources