Help!
I have an iPad app which runs html5 pages... one of the pages requires an email to be sent which opens the Mail program using this code
var link = 'mailto:' + toEmailAdd +'?subject=PDFs&body='+htmlString
window.open(link, 'Mailer');
After I send the email and go back to the program the page has lost focus and has the loading circle running in front of it.
Any help on how to make sure the page doesn't lose focus would be hugely appreciated!
I managed to work this out...
$('#addBtn').bind( "click", function() {
var link = 'mailto:' + toEmailAdd +'?subject=PDFs&body='+htmlString
window.open(link, 'Mailer');
setTimeout(ResetPage, 1);
});
function ResetPage(){
document.location = "";
};
Related
I'm trying to open mail on click in js. I'm using mailto, but in chrome you need to change the handlers settings to make it work.
My question is can I make some sort of popup that ask for persmission and changes this setting to others?
PS: to give permision for me I only found this way:
Open Gmail in Chrome and click the Protocol Handler icon overlapping-diamonds in your browser's address bar.
When prompted to "Allow Gmail to open all email links?", select "Use Gmail," and click "Done."
EDIT
My code to send the mail
$("#applyText").click(function(){
var email = 'mail#gmail.com';
var subject = 'Hire me im a genius';
var emailBody = 'Hi Sample,';
document.location = "mailto:"+email+"?
subject="+subject+"&body="+emailBody;
});
this is browser settings specific, ie. it will behave differently depending on the user's browser settings. The user can change how mailto: links behave in chrome by visiting chrome://settings/handlers, or Chrome Settings->Content Settings->Manage Handlers...
This is an answer to that question.
So to answer your question
No it is not possible because this is browser settings.
But most browsers should open it without a problem. For me this works properly.
By the way, you have some minor mistakes in your code.
Here is an working example
$("#applyText").click(function() {
var email = 'mail#gmail.com';
var subject = 'Hire me im a genius';
var emailBody = 'Hi Sample,';
document.location = "mailto:" + email + "?subject=" + subject + "&body=" + emailBody;
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="applyText">Click</button>
Per a client request, we forced all external links to open in a new tab. Currently I am using a js script for that.
However, it is also forcing the tel and mailto links to open new tabs as well. And I think that is why I am getting an error on some devices when you click and email link, where a pop up box says "This website has been blocked from automatically composing an email" - that one was uncovered specifically on an iPhone 6.
How can I force external links- but exclude mail and telephone links? Any assistance is greatly appreciated.
This is the external link script that I am using currently. I thought maybe I could just make an alteration to look for only external links that had "http" but an else statement for tel and mailto. But I am not sure how I could go about that.
jQuery(document).ready(function($) {
$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if(!a.test(this.href)) {
$(this).click(function(event) {
event.preventDefault();
event.stopPropagation();
window.open(this.href, '_blank');
});
}
});
});
Combined with my comment, I would opt to go for a check against the href attribute of each anchor, and check that it does not start with mailto: or tel::
(and the external link is not working at all, I guess that is caused by the snippet environment)
jQuery(document).ready(function($) {
$('a').each(function() {
var a = new RegExp('/' + window.location.host + '/');
if(!a.test(this.href) && this.href.substr(0,4)!='tel:' && this.href.substr(0,7)!='mailto:') {
$(this).attr('target', '_blank');
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
website,
e-mail and
phone.
I must admit that it is not ideal to check for all protocols that you might want to exclude, but it definitely is easier than checking for everything that you would like to open in a new window/tab.
I am using the Ionic framework.
I have a form as such:
<form action='https://secure.payu.in/_payment' method="POST" target="...">
......
</form>
Upon form submission, I need the result to open in an in-app browser.
As a dirty hack, I pointed the form submission target as an iframe in the current tab, but I want to avoid this.
Ideally, I need the form action url to open in an in-app browser (and not replace the app in the webview which would result in my loosing control of the app).
I tried to give "_blank" in the target but it doesn't seem to work on the device.
I also know the conventional way to open an in-app browser would be to do something like this:
var ref = window.open("http://example.com", "_blank", "location=no");
However, what I need is upon the form submission, an in-app browser should open and not triggering an in-app browser via js.
Any help appreciated!
I faced the same problem recently. I resolved this by injecting a form with the executeScript method.
First, you have to open a transition page (a blank page or other but with jquery referenced, you have to host it somewhere) in the appbrowser window:
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
Then, add a loadstop listener and call executeScript form there (when the URL matches the transition page's URL).
var browserWindow = window.open('http://transitionpage.com', '_blank', 'location=yes,hidden=yes,hardwareback=no');
var transitionLoaded = false;
var finalURL = 'https://finalurl.com';
var paramName = 'SOME_PARAM';
var paramValue = 'asdf';
function injectForm() {
browserWindow.executeScript({
code: "var $form;$form = $(document.createElement('form')).css({ display: 'none'}).attr('method', 'POST').attr('action', '" + finalURL + "');$('body').append($form);var $input = $(document.createElement('input')).attr('name', '" + paramName + "').val('" + paramValue + "');$form.append($input);$form.submit();"
}, function() {
//Form injected
transitionLoaded = true;
});
}
browserWindow.addEventListener('loadstop', function(event) {
if (event.url.indexOf('http://transitionpage.com') !== -1 && !transitionLoaded) {
injectForm();
}
});
browserWindow.show();
is there anyway through which I can open more than one email client, (on a single click) in java script, I know how to use mailto but don't know how to open multiple clients
this code opens the client on each reload.
window.location.href = "mailto:user#example.com?subject=Subject&body=message%20goes%20here";
Any help in this regard Thanks
If you want it to load the mail client on a click rather than every time the page refreshes, you want it attached to a click event, something like this :
<button class="button">Open Email</button>
Using jQuery :
$(document).ready(function(){
$('.button').on('click',function(){
window.location.href = "mailto:user#example.com?subject=Subject&body=message%20goes%20here";
});
});
Update
If you want it to load multiple instances of the client, just duplicate the window.location.href :
$(document).ready(function(){
$('.button').on('click',function(){
window.location.href = "mailto:user#example.com?subject=Subject&body=message%20goes%20here";
window.location.href = "mailto:user#example.com?subject=Subject2&body=message%20goes%20here";
});
});
It is not possible to launch external applications from JavaScript in a Browser.
mailto only launches the MUA which is configured as the default in the system-settings.
I have a link which when clicked redirects the user to the same page except with additional parameters:
<a id="lnkExportToPDF" href="javascript:void(0)">Export</a>
$('#lnkExportToPDF').click(function (e) {
e.preventDefault();
window.location.href = path + 'users/export/' + parm1 + '/' + parm2;
});
On the server side I handle it by checking for "export" in the request path, and if it's found I write a PDF file to the response:
System.Web.HttpResponse response = System.Web.HttpContext.Current.Response;
response.Clear();
response.AddHeader("Content-Type", "application/pdf");
response.AddHeader("Content-Disposition", String.Format("attachment; filename=" + filename + ".pdf; size={0}", buffer.Length.ToString()));
response.BinaryWrite(buffer);
response.End();
Everything works and the user can download the file, but any additional actions by the user that uses the loader.gif which is on the page shows an unanimated loader.
What could be causing this to happen? Is there any way to refresh/reload the page/javascript after the response is complete?
edit: I've found a useful JS tool here: http://fgnass.github.io/spin.js/ but I'd prefer not to use it unless absolutely necessary
edit2: I also tried using a generic handler (.ashx) to handle the request (ie. changing the href to point to the handler), but as soon as the page redirects and the file is written, same thing happens
edit3: The problem is only happening in Firefox so far. I've tried Chrome and IE and the gif stays animated in those browsers. (latest versions of each)
edit4: If I use an iframe with the src as the image it solves the issue, but it's very hacky and the style of it looks different across all browsers with regards to centering/padding/margins.
edit5: Yeah. If I inspect the frozen gif with firebug it magically unfreezes itself.
I managed to recreate the problem in firefox and I really can't find a way to "unfreeze" the gif. When I added a completely different file after a download and that too was frozen I gave up with that approach.
What I did instead was to test different ways to trigger the download. I found no window.location solutions that worked, what did work though was this:
window.open(path + 'users/export/' + parm1 + '/' + parm2);
window.open opens a new tab and downloads the file through that instead of the current tab as window.location does. It will return to the current tab as soon as the download starts.
Edit
You could also use a hidden iframe:
var iframe = document.getElementById('iframe');
iframe.src = path + 'users/export/' + parm1 + '/' + parm2;
I confirm that I have the same behavior with firefox, and the first that come to my mind is to use SetTimeOut but still the same behavior, so on firefox for some reason, this window.location.href is also call the "Stop" on browser, that this cause the gif animation to stop.
So what I found and you can solve your issue, that this is not happends on simple links.
And if you change your code you can archive the same effect with a link.
So change this
$('#lnkExportToPDF').click(function (e) {
e.preventDefault();
window.location.href = "page.aspx";
});
to something like this
$('#lnkExportToPDF').attr("href", "page.aspx");
and you have the same results, and gif will still moving.
Here is the fiddle test.
On the test I add to move to paypal, because is slow moving and you can see the animation stop or not, also pp not let show on iframe, so on example you stay on example and not load the page.
When you click on this example, the issue is appears only on firefox !
http://jsfiddle.net/hn7S9/4/
One other issue that I think is that if you need to make your parametres to the next page on click, you probably need to redesign that and fix them before your click.
This is possible because for sure is not depends on the last click on the dynamic create link. So make the link with their parametres before the click.
You could try an asynchronous approach on the click to allow the browser to parse the event queue after the click has initiated:
$('#lnkExportToPDF').click(function (e) {
e.preventDefault();
setTimout(function() {
window.location.href = path + 'users/export/' + parm1 + '/' + parm2;
}, 20);
});
How about allowing the link to actually fire, but opening it in a new tab?
That shouldn't interrupt anything about the gif, and is semantically fine, other than I guess it would leave a tab open. You could get rid of the content-disposition, and allow the browser /user to decide what to do with it though.
<a id="lnkExportToPDF" target="_blank">Export</a>
$('#lnkExportToPDF').click(function (e) {
$(this).attr("href", path + 'users/export/' + parm1 + '/' + parm2);
});
Instead of setting the window.location.href, you can use a form with method="get" and submit it. This form could either be coded into your HTML or created dynamically. See this Answer:
https://stackoverflow.com/a/21742326/1614903
Here's my solution. It's faster and easier than any fix or workaround I've found. Just open the problem page in Chrome. Chrome has it's own problems, but this isn't one of them. Whenever I encounter a page full of gifs that causes Firefox to freeze, I just copy the URL, close the tab, open Chrome, and paste in the URL. I works every time! :o)