javascript mailto not working in chrome mobile browser - javascript

mailto via javascript not working in mobile chrome browser
window.location.href = "mailto:linto.cet#gmail.com?subject=subject&body=body"
is not working in mobile google chrome browser
actual source

Chrome on Android is blocking the redirects to apps that are not made via a user gesture.
So via javascript it's not possible to redirect the user to the mail app since Chrome 40, only if you put it for example in a button href, that will work when user clicks the button.
You can read more in chromium forum
If you inspect the Chrome console you will a warning, something like: Navigation is blocked: mailto:?...

I am posting an answer as this is possible.
Create a hidden from view / temporary link element and simulate the click.
var linkElement = document.createElement('a');
linkElement.style.visibility = 'hidden';
linkElement.style.position = 'absolute';
linkElement.href = 'mailto:linto.cet#gmail.com?subject=subject&body=body';
document.body.appendChild(linkElement);
and later when you want to trigger and open the mail client:
linkElement.click();

On my site, when people click on what they believe to be mailto links (same restrictions apply on tel: links, by the way), I first send a GA event, and then use window.location to initiate the mailto. While Chrome will give me the warning via the dev console, it still processes the tel/mailto request, and the window still pops up.

Related

how to make chrome extension with options that allow you to open settings of chrome in new tab?

today i'm facing problem that i can't solve my problem is very simple i wanted to make
chrome extension that allow me to do some easy steps exomple i wanted to open chrome setting
in new tab with my extension i did setting botton in the extension and the clear browser data
and open extension of chrome but when i try to open it when i click nothing happen it keep
give me this error =
Not allowed to load local resource: chrome://settings/
and my code is this =
<div class="flex"><i class="fas fa-cogs" style="color:darksalmon "></i></div>
please help me to solve this error please and thank you very much
You cannot use the standard HTML anchor to open an internal Chrome link. Chrome’s links are not valid navigation protocols, only these are:
Website
Email
Telephone
Document Section
JavaScript
For a internal Chrome link you should open a new tab and pass the internal link to it via the Tab API...
https://developer.chrome.com/extensions/tabs
Use the function "create"...
chrome.tabs.create({'url':'chrome://settings/','selected':true}, function(tab){
/// Whatever else goes in here...
});

How to avoid mixed/insecure content warnings when having deep links to non-http schemes for mobile apps?

Let's say I have a mobile app that listens to all "myawesomeapp" scheme links so it can open them in the app and I have a related website. Now when a page, for eg, https://myawesomeapp.com/home/ is loaded in the browser, I create an iframe dynamically and add it to the document with the src of myawesomeapp://myawesomeapp.com/home/ so that my app can try and open up that page within itself. But most modern browsers will display an insecure/mixed content warning when such a link is created from a page served over HTTPS. Is there a way around this behaviour?
Browser can't guarantee that the protocol myawesomeapp is secure (like https). So as a security consideration, it MUST warn the user that insecure content is being loaded in an otherwise secure page.
You can create a service on server to redirect to another scheme. i.e. https://website.com/deeplink/appscheme/path will redirect browser to appscheme://path.
According to this the iframe src trick doesn't work anymore.
If you want your app to automatically trigger upon landing on a web page, I found putting this that web page's <head> tag works:
<meta http-equiv="refresh" content="0; url=myprotocol:/path1" />
Where myprotocol is the "scheme" in your intent filter.
However, I am not sure if this method will also be "blocked" future versions of the browser. As the link above stated:
you should implement a user gesture to launch the app via a custom scheme, or use the “intent:” syntax
It seems to me they want intents to be triggered only by user-initiated gestures such as clicking a button, or a link. There could be security issues if a webpage can trigger intents on its own.
I guess what you want is if the user clicks a link to your site, he gets the option to open the link in your app instead of in the browser.
The way to do this in Android is registering an intent filter so your app gets launched when the user clicks a link to your domain name.
See the example intent filter here:
https://developer.android.com/guide/components/intents-common.html#Browser
This is better than using a custom scheme because the link will lead the user straight to the app, instead of loading the site in a browser which will then open the app.
This works different than in iOS, yes. To keep both compatible, you could sniff the useragent and show the iframe with the custom scheme only in iOS browsers.
Can you try this code out? Call it when the document is ready and pass to it the url of your app.
var redirect = function ( location )
{
var iframe = $('<iframe></iframe>').attr( 'src', location ).css({
width: 1,
height: 1
});
$( 'body' ).append( iframe );
iframe.remove();
iframe = null;
};

Deeplinking mobile browsers to native app - Issues with Chrome when app isn't installed

I have a webpage, lets call it entry.html.
When a user enters this page, a javascript code (see below) is attempting to deep-link the user to the native iOS / Android app.
If the deep-link fails (probably if the app isn't installed on device), user should "fall back" to another page- lets call it fallback.html.
here is the javascript code that is running on entry.html:
$(function(){
window.location = 'myapp://';
setTimeout(function(){
window.location = 'fallback.html';
}, 500);
});
this is a standard deep-linking method that is recommended all over the network; try to deep-link, and if the timeout fires it means that deep-link didn't occur- so fallback.
this works fine, as long app is installed on device.
but if the app isn't installed, this is the behaviour when trying to deep-link:
Mobile Safari: I see an alert message saying "Safari cannot open this page..." for a moment, and then it falls-back properly to fallback.html- which is the expected behaviour.
Mobile Chrome is my problem.
when the app isn't installed, browser is actually redirected to the myapp:// url, which is of course, invalid- so i get a "not found" page, and fall-back doesn't occur.
Finally- my question is:
How can I fix my code so FALL-BACK WILL OCCUR on mobile Chrome as well? just like mobile Safari?
note: i see that LinkedIn mobile website does this properly, with Safari & Chrome, with or without the app installed, but i couldn't trace the code responsible for it :(
note2: i tried appending an iframe instead of window.location = url, this works only on Safari, mobile Chrome doesn't deep-link when appending an iFrame even if app is installed.
Thanks all!
UPDATE:
i found a decent solution, and answered my own question. see accepted answer for my solution.
for whoever is interested, i managed to find a decent solution to solve these issues with deeplinking Chrome on Android.
i abandoned the myapp:// approach, i left it functioning only in cases of an iOS device.
for Android devices, i'm now using intents which are conceptually different than the myapp:// protocol.
I'm mainly a web developer, not an Android developer, so it took me some time to understand the concept, but it's quite simple. i'll try to explain and demonstrate MY solution here (note that there are other approaches that could be implemented with intents, but this one worked for me perfectly).
here is the relevant part in the Android app manifest, registering the intent rules (note the android:scheme="http" - we'll talk about it shortly):
<receiver android:name=".DeepLinkReceiver">
<intent-filter >
<data android:scheme="http" android:host="www.myapp.com" />
<action android:name="android.intent.action.VIEW" />
<category android:name="android.intent.category.BROWSABLE"/>
<category android:name="android.intent.category.DEFAULT"/>
</intent-filter>
</receiver>
now, after this is declared in the app manifest, i'm sending myself an email with "http://www.myapp.com" in the message.
when link is tapped with the Android device, a "chooser" dialog comes up, asking with which application i want to open the following? [chrome, myapp]
the reason this dialog came up upon tapping on a "regular" url, is because we registered the intent with the http scheme.
with this approach, the deeplink isn't even handled in the webpage, it's handled by the device itself, when tapping a matching link to an existing intent rule defined in the Android app manifest.
and yes, as i said, this approach is different by concept than the iOS approach, which invokes the deeplink from within the webpage, but it solves the problem, and it does the magic.
Note: when app isn't installed, no chooser dialog will come up, you'll just get navigated to the actual web page with the given address (unless you have more than 1 browser, so you'll need to choose one... but lets not be petty).
i really hope that this could help someone who's facing the same thing.. wish i had such an explanation ;-)
cheers.
It is very important to make sure that when you try to open a deeplink URL with JavaScript that the URL is properly formatted for the device and browser. (If you do not use the appropriate deeplink URL for the browser/platform, a user may be redirected to a “Page Not Found”, which is what you experience.)
Now you must note that Chrome on Android has a different URL format than the old standard Android browser 1! You need to annotate the deep links using href="android-app://" in the HTML markup of your web pages. You can do this in the section for each web page by adding a tag and specifying the deep link as an alternate URI.
For example, the following HTML snippet shows how you might specify the corresponding deep link in a web page that has the URL example://gizmos.
<html>
<head>
<link rel="alternate"
href="android-app://com.example.android/example/gizmos" />
...
</head>
<body> ... </body>
For more details, see the references here:
https://developer.chrome.com/multidevice/android/intents
https://developers.google.com/app-indexing/webmasters/server
https://developer.android.com/training/app-indexing/enabling-app-indexing.html#webpages
And here's a deep link testing tool for Android: https://developers.google.com/app-indexing/webmasters/test.html
Hope that helps.
1 Since the old AOSP browser was replaced by chromium, this is now the default way to handle deep links for recent Android versions. Nonetheless, Android still requires a conditional soltion, because older OS versions still use the AOSP browser.
I have created a Javascript plugin, which supports most of the modern browsers on mobile. But it requires to have deep linking landing pages to be hosted on cross domain(different than universal link url) to work on ios9 Facebook using universal linking. There is also different way to get that working on the Facebook iOS9 using Facebook SDK. I am sharing this if anyone might find this helpful. Currently it does not fallback option, but if falls back to the App Store.
https://github.com/prabeengiri/DeepLinkingToNativeApp
I am Using this Code to for deeplinking.
If the app is installed the app will open up..
If the app is not installed then this remains as it is..
If you wish to add any other condition for app no install then just uncomment the setTimeout code .
<script>
var deeplinking_url = scootsy://vendor/1;
$(document).ready(function(){
call_me_new(deeplinking_url);
});
var call_me_new = function(deeplinking_url){
if(deeplinking_url!=''){
var fallbackUrl ='http://scootsy.com/';
var iframe = document.createElement("iframe");
var nativeSchemaUrl = deeplinking_url;
console.log(nativeSchemaUrl);
iframe.id = "app_call_frame";
iframe.style.border = "none";
iframe.style.width = "1px";
iframe.style.height = "1px";
iframe.onload = function () {
document.location = nativeSchemaUrl;
};
iframe.src = nativeSchemaUrl; //iOS app schema url
window.onload = function(){
document.body.appendChild(iframe);
}
//IF the App is not install then it will remain on the same page.If you wish to send the use to other page then uncomment the below code and send a time interval for the redirect.
/*
setTimeout(function(){
console.log('Iframe Removed...');
document.getElementById("app_call_frame").remove();
window.location = fallbackUrl; //fallback url
},5000);*/
}
};
</script>
setTimeout(function () { if (document.hasFocus()) { window.location = 'URL WILL BEHERE';} }, 2000);
window.location = 'app://';
Need to check document.hasFocus() here because if app is open then playstore url is also open in browser
I also had similar issue, there is a possible alternative for this. If the app is not installed on user's device we can redirect that to some other url.To know more about it Check Here
Example:
Take a QR code
In my case its working fine in opera and chrome browser my deeplink url is
"intent://contentUrl + #Intent;scheme=" +envHost +;package="+envHost+";end";
For other browser create iframe and append the url.
Note -: iframe url append having issue with old device and in firefox its opening app dialog .

mailto launches the default mail client outlook but then current tab closes

I am using IE8.
var ClientContactsTable = document.getElementById("clientContacts");
var TableRow = ClientContactsTable.insertRow(1);
var Email=TableRow.insertCell(0);
Email.setAttribute("className","CellValueWrap");
Email.innerHTML='My Name'==''?" ":"<a class='ReportLink' target='_blank' href='mailto:"+'me#gmail.com'+"'>"+"My Name"+"</a>";
alert(Email.innerHTML);
When I am clicking on My Name - it launches Outlook, asks for permission (whether you want to launch the outlook client or not), once I do Allow it launches Outlook and then the tab which was running my app displays the address as me#gmail.com with blank content. then I have to do a back to go to my app page.
this is surely disappointing for my users.
This issue does not happen in Firefox. How to avoid it?
I tried both target='_blank' as well as _self but both causing same problem

is window.open("", ... impossible with firefox?

In firefox I have opened a locally stored file with the file:// protocol
(file:///c:/temp/foo.html)
foo.html contains Java Script which (among others) is supposed a new
window without URL:
var new_window = window.open("","", "height=100,left=50,width=200");
When this line is reached, Firefox displays this "Firefox prevented this site from opening a pop-up window". I don't understand why Firefox gives this warning, obviously, the file (foo.html) is under my control (since it's stored locally and I have opened it with the file:// protocol, and, additionally, the window to be opened doesn't point to any file that could contain any sensitive data, as the url parameter in the open method is set to "".
But besides all this, it seems I can't even force or allow firefox to open the window anyway. There's this "options" button on the yellow "Firefox prev...." bar which supposedly should allow to create exceptions, yet I can't.
So, the question basically boils down to: how can I allow a local html file to open an empty window with Javascript within Firefox.
Thanks / Rene
This is a Firefox security precaution, see this link:
http://kb.mozillazine.org/Links_to_local_pages_don't_work
However, it looks like this extension will allow you to override it:
https://addons.mozilla.org/en-US/firefox/addon/281
This is the popup blocker, which block popups not opened by an explicit user action like a click.
You cannot force it to open the popup, you need to allow Firefox to open it.
I suggest you to test the new_window variable to see if it is null. In this case, display a message to the user so that he allows the domain to open popup windows.

Categories