mailto links not working in Chrome and Safari Mobile - mailto

In my jQuery Mobile App, I have a mailto link, its href attribute is dynamically generated and it is 'clicked' via jQuery.Here is the link code:
<a id="mealLink" href="mailto:123#123.com" style="display: none;">This is the mailto
link</a>
A click handler is attached to it like this:
$('#mailLink').bind('click', function() {
window.location.href = $(this).attr('href');
});
Lastly,a function creates the href attribute for the link with emailaddress, subject and message body and click is simulated via jQuery:
$emailAddress= ..
$subject= ....
$body=...
$emailString="mailto:"+$emailAddress+$subject+$body;
$emailLink= $("#mealMail");
$emailLink.attr("href",$emailString);
$emailLink.click();
Now, this code is working perfectly in:
Mozilla desktop
Safari desktop
Android
But not working in:
Safari Mobile
Chrome desktop
Any suggestions?

After searching for complex solutions, I found a much easier solution by chance. The issue here is that if a mailto link is directly clicked, it works in all browsers, but if it is indirectly clicked, such as via jQuery .click() function, it does not work in all browsers. Therefore, here is my implementation:
This is a mail to link
$emailAddress= ..
$subject= ....
$body=...
$emailString="mailto:"+$emailAddress+$subject+$body;
$emailLink= $("#emailLink");
$emailLink.attr("href",$emailString);
Now, depending upon the context of an application, the href parameter of the link can be setup and when this link is clicked, it works. I have tested in following browers:
Mozilla Firefox Desktop
Safari Desktop
Chrome Desktop
Safari mobile on ipad 1

You should not use mailto:
Check if is not better to create a simple "Contact us" form.
But still, take a look at this: i-cant-get-mailto-links-to-open-the-mail-app-from-mobile-safari-when-using-jqto

Related

Firefox OS - Launch external link inside Firefox OS app and retrieve its content

I have a Firefox OS app in which I have opened an web page via mozbrowser attribute.
<iframe id="inlineFrameExample"
mozbrowser=true
src="<some external link>"
</iframe>
How can we retrieve DOM content of the iframe?
You can retrieve DOM content via executeScript() method present in Browser API. It will run the script against the iframe and will allow you to do DOM computation tasks.
Note: The example mentioned in the document didn't worked but the syntax given below worked for me. The diff is is passed as string.
iframe.executeScript('put_your_script_here', {origin: 'domain_name'});

Xamarin HybridWebView always opens in Browser with xamarin.iOS when using Appcues script

When i check in the script from Appcues then i see it trieds to embed an iframe to my body element.
I can see that adding an iframe with <iframe src="https://www.google.com"></iframe> in my website. That iOS apps opens to the native browser to google immediately. The same result when adding an Appcues script.
I can ignore the navigate to google url but if i do that for Appcues. Appcues doesn't get shown in my app. This works fine on Xamarin.Android

WebView, opening link in different window/tab

Is it possible to open a link like this to be opened in Safari by only changing the contents of the HTML file only?
My WebView loads a local HTML page with this source:
Link to Fanpage
How do I make it so that it opens in Safari? By default it should also open in Facebook app if it was downloaded?
It's annoying that it opens the Facebook page on the same webview and the user won't be able to go back to the previous webpage.
Would I have to face a new approach? Thank you.
I looked at other solutions but I don't know what it means by adding a delegate to the webview?
I think you are trying to get get back-history working with anchors on iOS? I have been dealing with the same issue.
Thanks to inspiration from http://www.bennadel.com/, created the following angular directive that fixes this back-history issue. Basically it overrides the default html anchor behavior.
.directive('anchorOpenInNewWin',function() {
return {
restrict : 'A',
link : function($scope,$element,$attrs) {
$element.bind('click touchstart',function(e) {
e.preventDefault();
e.stopPropagation();
location.href = $attrs.href;
});
}
}
});
<a anchor-open-in-new-win href="http://www.google.com" target="_blank">google</a>
This solution could be easily translated into jquery or whatever you are using. Hope this helps

Browser detection problems

I have a website that will be displayed in all browser but I need it to display an alert box on load only in Firefox.
How can I detect the browser and specify that if it is mozilla the alert should pop up?
You could include jQuery in your website and try the following code:
if ($.browser.mozilla) {
alert( "this is mozilla!" ); // popup if the browser is mozilla
}
PS: Bear in mind that all Mozilla derivates are recognised here.

sencha touch :: is it possible (and how) to open a website inside a panel or in external browser window?

i wonder if and how it is possible to open a website inside a panel or in an external browser window of the mobile safari! I tried to open a website inside a panel but due to crossdomain problems only the htm without the css was loaded.
any ideas?
thnx!
edit: let's say, we use phoneGap
As far as I know, cross-domain issues do block you from IFRAME solutions for displaying external links inside your app.
Best solution currently is to have links include target="_blank" to force a new browser window to open.
#Stevanicus #Dalar It does open a new window in Mobile Safari if you use Phonegap and allowed domains using phonegap.plist whitelist property, but if you do somthing like
var rateMsg = Ext.Msg.confirm('Title', 'Some message', function(e) {
if(e == 'yes')//If user confirms yes
{
window.open("http://www.example.com", "_blank");//We open a link with _blank to use mobile safari and not your webview
}
});
It does not work.

Resources