We Keep Coding

JavaScript and browser PDF support detection

I'm trying to get to work PDF support detection based on a browser where application is running.
First application is checking if a browser is not running on a mobile device. That part works fine - I'm getting Globals.bAllowPdfPreview = true
Then I try to execute code below
if (Globals.bAllowPdfPreview && window.navigator && window.navigator.mimeTypes)
{
Globals.bAllowPdfPreview = !!_.find(window.navigator.mimeTypes, function (oType) {
return oType && 'application/pdf' === oType.type;
});
if (!Globals.bAllowPdfPreview)
{
Globals.bAllowPdfPreview = (typeof window.navigator.mimeTypes['application/pdf'] !== 'undefined');
}
}
It works fine on Chrome but I'm not able to get it to work on FireFox or IE11 - it fails on both statements to verify.
Any tips why is not working?

It came up that Firefox is not working as Mozilla removed the application/pdf MIME type from navigator.mimeTypes object and for IE11 only application/futuresplash and application/x-shockwave-flash are available by default.

Download files (movies) with Internet Explorer

A page contains a player where you can view videos from a given list. Videos which are currently running in the player should be downloadable to disk. So there is a button download beside the player which starts a pure javascript function downloadClip(). This is the code :
function downloadClip() {
if (media.currentSrc="") return;
var url =media.currentSrc;
var file = url.substring(url.lastIndexOf('/')+1);
// Mac -> works with Safari 8.0.6, FireFox 37.0.2, Chrome 41.0.2272.64
// WIN -> works with FireFox 38.0.5, Chrome 43.0.2357.130m
if (!window.ActiveXObject) {
var hyperlink = document.createElement('a');
hyperlink.href = 'loadmovie.php?file='+file;
hyperlink.download = file;
var mouseEvent = new MouseEvent('click', {
view: window,
bubbles: true,
cancelable: true
});
hyperlink.dispatchEvent(mouseEvent);
}
// for IE
else
if ( !! window.ActiveXObject && document.execCommand) {
var _window = window.open(media.currentSrc, '_blank');
_window.document.close();
_window.document.execCommand('SaveAs', true, url || media.currentSrc)
_window.close();
}
}
I got this script here from SA but I must say I do not know if this is the best (simple) way to download files. Anyway it works fine for browser noted above.
My problem is IE. As I found out ActiveXObject is hidden from the DOM starting with IE11 , as written here. But I only have access to IE11 on a provided laptop and I cant test earlier vesions. So I am asking if anyone can give me hints / support to the question how to download files to disk with :
a) IE11 (no ActiveXObject support anymore
b) IE10 and before.
Please note: I use only pure js
Any link to official docs and code samples are welcome.

PayPal lightbox won't open in iPhone safari/web app; 'win.location' undefined

(works fine in Chrome on the iPhone)
I get this error:
TypeError: 'undefined' is not an object (evaluating 'win.location') in dg.js line 3
And the lightbox does not open.
The code in question inside PayPal's dg.js is:
startFlow: function (url) {
var win = that._render();
if (win.location) {
win.location = url;
} else {
win.src = url;
}
}
So does mobile Safari not understand that._render()? How do I get around this?
If it matters, I'm using Adaptive Payments, calling it like so:
var dg = new PAYPAL.apps.DGFlow({
trigger: null,
expType: 'light'
});
dg.startFlow('https://www.paypal.com/webapps/adaptivepayment/flow/pay?expType=light&payKey=' +data.paykey);
I don't have any problems getting the payKey & the entire payflow works on desktops and in mobile browsers other than Safari (it works on desktop Safari). It also does not work when our site is run as an iOS web app, which I assume is just a shell for Safari anyway.

I can explain why you are seeing this error.
Safari on iOS only allows a window to be opened as a result of a user click/touch event.
The DGFlow._render() function executes:
window.open('', "PPDG");
which returns null if triggered by anything other than a user click/touch event.
I am guessing you are issuing an XMLHttpRequest to generate a PayRequest/PayKey on the server and then in the onsuccess callback you are calling DGFlow.startFlow().
The solution is two split the process into two steps:
When the user is ready to checkout, issue the call to the server to
generate the pay key.
Then, present the user with a button to Checkout with PayPal and when that is clicked, call DGFlow.startFlow()

Found a couple of ways to get around this...location.replace with the PayPal URL or using your own lightbox. I used easybox.
// Replace
dg.startFlow('https://www.paypal.com/webapps/adaptivepayment/flow/pay?expType=light&payKey=' +data.paykey);
// with
var RUNNING_AS_WEB_APP = (window.navigator.standalone == true ? true : false);
if (RUNNING_AS_WEB_APP === false) {
dg.startFlow('https://www.paypal.com/webapps/adaptivepayment/flow/pay?expType=light&payKey=' +data.paykey);
} else {
location.replace('https://www.paypal.com/webapps/adaptivepayment/flow/pay?expType=light&payKey=' +data.paykey);
// Or, lightbox option:
// $.easybox([{url: 'https://www.paypal.com/webapps/adaptivepayment/flow/pay?expType=light&payKey=' +data.paykey, width: 320, height: 480}]);
}

Try using the mini browser experience where expType=mini. Seems to work better than the lightbox on mobile devices.
Adaptive Payments without modal box or popups?

Multiple mp4 requests in Chrome stuck in 'pending'

I have a list of films (buttons) which - when a user clicks - performs an AJAX request to update the video tag's source attribute. Before loading the new video (.load()), the video element is cloned, removed, then re-inserted into the DOM (this is to fix a Safari bug). See code below:
//load in new paths
var contentVideos = $("#projectsMedia video source");
contentVideos.each(function () {
if ($(this).attr("src").lastIndexOf("mp4") !== -1) {
$(this).attr("src", videoPath + ".mp4");
} else if ($(this).attr("src").lastIndexOf("ogv") !== -1) {
$(this).attr("src", videoPath + ".ogv");
} else if ($(this).attr("src").lastIndexOf("webm") !== -1) {
$(this).attr("src", videoPath + ".webm");
}
});
//clone vid, delete, reload for safari bug
var clonedVid = $("#projectsMedia video").clone();
$("#projectsMedia video").remove();
clonedVid.insertAfter($("#projectsMedia h1"));
$("#projectsMedia video")[0].load();
This works fine for all browsers, but Chrome seems to be throwing a spanner into the works. When the new path is put into the src attribute and the video is loaded, Chrome takes anywhere between 2 second to infinity to load the video.
Opening the dev console, I found that the mp4 file is being downloaded multiple times (an apparent feature of Chrome), and the requests are stuck in pending for an indefinite amount of time and the video rarely loads within 10 seconds. See screenshot.
Another curios behaviour in Chrome is that on a page refresh (or button-click to perform a new AJAX request), if the dev console is not open, then opening it will force the mp4 to load, and it works fine.
Does anyone know of a solution to this?

HTML 5 Audio to play MP3 in Internet Explorer 8,9,10

I have tested the following code in Chrome and it works a treat, but Internet explorer doesn't seem to start playing the sound (I am testing in IE9). The rest endpoints returns a data stream with audio/mp3 audio/aac audio/ogg mime types as appropriate...
var url = "/MyServer/services/rest/notifications/sounds/"+soundId+"/"+soundFormat;
var snd = new Audio(url);
snd.addEventListener('ended', function() {
if (this.debug) {
console.info("Sound ended");
}
that.playingSound = false;
});
if (this.debug) {
console.info("Requesting sound to start url:"+url);
}
that.playingSound = true;
snd.play();
Any ideas what might get IE working? I've seen some HTML 5 capability tables that say this is not supported in IE9, whereas other places imply it should work? Maybe this only works if you use the embedded HTML tags instead of code (with preload true), however I need to dynamically load the sound at runtime.