How to detect Firefox mobile with javascript? - javascript

I'm using the following code to detect whether the browser being used on my mobile site matches a certain crieteria:
var isiPhone = navigator.userAgent.match(/iPhone/i) != null;
if (isiPhone){ alert ('iphone');
but if I attempt to do this for Firefox / Mozilla, I can't get it to work. I've tried:
var isFirefox = navigator.userAgent.match(/Mozilla/i != null);
and
var isFirefox = navigator.userAgent.match(/Firefox/i != null);
I visited whatismyuseragent.com and got the following:
Mozilla/5.0 (Android;Linux armv7l; rv6.0) Gecko/20110811 Gecko Firefox/6.0 Fennec/6.0
Any idea how I properly detect this? I need to write some firefox specific code.

You can use the navigator.userAgent to detect the browser and navigator.platform to detect the current platform.
To Detect Firefox:
var is_firefox = navigator.userAgent.toLowerCase().indexOf('firefox') > -1;
To Detect Android:
var is_android = navigator.platform.toLowerCase().indexOf("android") > -1;
To Detect Both:
if(is_firefox && is_android)
//Do Work
I would recommend using something like modernizr to avoid browser detection and focus on feature detection.

var isFirefox = /Android.+Firefox\//.test(navigator.userAgent);

The mobile version of Firefox is Fennec, so just search for that:
var is_Firefox = navigator.userAgent.toLowerCase().indexOf('fennec') > -1;

None of the above functions were working for me, specifically buriwoy was detecting either android or firefox, this version of his function works:
function detectAndroidFirefox () {
var agent = navigator.userAgent.toLowerCase();
if(agent.indexOf('firefox') >= 0){
if(agent.indexOf("android") >= 0){
return true;
} else{
return false;
}
} else{
return false;
}
}

you can check from user agent if it's contain firefox or android, for this maybe you need some code with regex

Rion's answer doesn't work (at least anymore), because navigator.platform doesn't return Android, it returns Linux.
I wrote a function which seems to work:
function detectAndroidFirefox () {
var agent = navigator.userAgent.toLowerCase();
return (agent.indexOf('firefox') + agent.indexOf("android")) >= 0;
}
Thought maybe someone will need this.

Related

msRequestFullscreen not working in case keydown event (IE 11)

I`m working with fullscreen api.
I`ve added this polyfill:
let doc = document as any;
if (!doc.requestFullscreen) {
document.body.requestFullscreen = doc.body.mozRequestFullScreen ||
doc.body.webkitRequestFullscreen || doc.body.msRequestFullscreen;
document.exitFullscreen = doc.mozCancelFullScreen || doc.webkitExitFullscreen ||
doc.msExitFullscreen;
}
I have UI button for enabling fullscreen mode and all works fine (chrome IE 11, edge, opera, firefox)
Also I have keydown handler:
if (args.keyCode === 70) {
args.preventDefault();
if (!this.isInFullScreen) {
document.body.requestFullscreen();
}
else {
document.exitFullscreen();
}
this.InFullScreen = !this.isInFullScreen;
}
But enabling/disabling fullcreen mode by pressing F doesn`t work in IE 11.
msRequestFullscreen function simply do nothing.
There are no console errors or smth.
In other browsers works fine.
How can I solve this issue?
I can reproduce the issue. msRequestFullscreen works in IE 11 but it just doesn't work in keyCode event.
As a workaround, I suggest that you can use ActiveXObject to SendKeys F11. It can make it full screen in IE 11. You can add the following code:
if ("ActiveXObject" in window) {
var wscript = new ActiveXObject("Wscript.shell");
wscript.SendKeys("{F11}");
}

Remove Element When Page is Viewed using Internet Explorer

I have the following bit of code shown below:
<div class="timer" id="timer"><img src="http://i.imgur.com/87XaOWA.png"><p class="close-message" id="close-message"></p></div>
Now, when the page is viewed in Internet Explorer I want the div to be removed.
Since IE doesn't support the .remove() function I have found the following solution to circumvent the problem here. I have also found the following fiddle that can detect which browser is being used to view the page.
I've tried the following two if statements to remove the div tag when viewed in IE to no avail:
// Internet Explorer 6-11
var isIE = /*#cc_on!#*/false || !!document.documentMode
if (isIE = false) {
jQuery("#timer").eq(i).remove();
}
and
// Internet Explorer 6-11
var isIE = /*#cc_on!#*/false || !!document.documentMode
if (isIE = false) {
var node = document.getElementsById('timer')[i];
node.parentNode.removeChild(node);
}
What am I doing wrong? Individually the two components work fine, but when I try to use them together they don't work.
Your first error is:
if (isIE = false) {
you need to use a double equal sign for comparing, and in your case it should be:
if (isIE == true) {
The second error is:
document.getElementsById('timer')[i]
change it to:
document.getElementById('timer')
var isIE = /*#cc_on!#*/false || !!document.documentMode;
if (isIE == true) {
var node = document.getElementById('timer');
node.parentNode.removeChild(node);
}
//
// in jQuery: remove: .eq(i)....
//
if (isIE == true) {
jQuery("#timer").remove();
}
<div class="timer" id="timer"><img src="http://i.imgur.com/87XaOWA.png"><p class="close-message" id="close-message"></p></div>

How do I detect popup blocker in Chrome?

I have searched many issue in stack overflow and might be duplicate here Detect Popup
But not helped for me while testing in Chrome (tested v26.0.1410.64)
Following Approach Worked in IE and Firefox but not in Chrome
var popup = window.open(winPath,winName,winFeature,true);
if (!popup || popup.closed || typeof popup.closed=='undefined'){
//Worked For IE and Firefox
alert("Popup Blocker is enabled! Please add this site to your exception list.");
window.location.href = 'warning.html';
} else {
//Popup Allowed
window.open('','_self');
window.close();
}
Any better solution that works for Chrome also?
Finally, it success by combining different answer from Stackoverflow's member
This code worked for me & tested in IE, Chrome & Firefox
var popup = window.open(winPath,winName,winFeature,true);
setTimeout( function() {
if(!popup || popup.outerHeight === 0) {
//First Checking Condition Works For IE & Firefox
//Second Checking Condition Works For Chrome
alert("Popup Blocker is enabled! Please add this site to your exception list.");
window.location.href = 'warning.html';
} else {
//Popup Blocker Is Disabled
window.open('','_self');
window.close();
}
}, 25);
Try Below..!!
var pop = window.open("about:blank", "new_window_123", "height=150,width=150");
// Detect pop blocker
setTimeout(function() {
if(!pop || pop.closed || pop.closed == "undefined" || pop == "undefined" || parseInt(pop.innerWidth) == 0 || pop.document.documentElement.clientWidth != 150 || pop.document.documentElement.clientHeight != 150){
pop && pop.close();
alert("Popups must be enabled.");
}else{
alert("Popups is enabled.");
pop && pop.close();
}}, 1000);
Look on below question
Detect blocked popup in Chrome
How do I detect whether popups are blocked in chrome
On Google It will more help you..
https://www.google.com/search?q=how+to+detect+a+blocked+popup+in+chrome
I found it much more effective to use try-catch as follows:
var popup = window.open(winPath,winName,winFeature,true);
try {
popup.focus();
} catch (e) {
alert('popup blocked!');
}
I know this is "resolved", but this simple code worked for me detecting "Better Popup Blocker" extension in Chrome:
if (!window.print) {
//display message to disable popup blocker
} else {
window.print();
}
}
Ockham's razor! Or am I missing something and it couldn't possibly be this simple?
I had used this method to open windows from js and not beeing blocked by Chrome.
http://en.nisi.ro/blog/development/javascript/open-new-window-window-open-seen-chrome-popup/
The below code works in chrome,safari and firefox. I have used jquery for this.
var popupWindow = window.open("http://www.google.com","directories=no,height=100,width=100");
$(document).ready(function(e) {
detectPopup();
function detectPopup() {
if(!popupWindow) {
alert("popup will be blocked");
} else {
alert("popup will be shown");
window.open('','_self');
window.close();
}
}
});

how can i test if internet explorer version is version 7 or version 8?

I want to test if IE is version 7 or 8 and if it is prevent a specific piece of code running?
I've tried the following code but this doesnt seem to work:
if($.browser.msie && parseInt($.browser.version, 10) <= 8) {
$(document).on('mouseenter', '.thumb', function () {
$(this).find('.bgg').stop().animate({ opacity : 1 });
});
$(document).on('mouseleave', '.thumb', function () {
$(this).find('.bg').stop().animate({ opacity : .5 });
});
}
Ideally I really dont want to use this kind of detection but in this case it has to be used.
Foolproof method:
<!--[if lte IE 8]><script type="text/javascript">
// specific code for IE8 and below goes here.
</script><![endif]-->
I've had to UA sniff for IE in my projects due to the requirement of having only one script file. We don't want the extra http request that #Kolink's method requires, nor do we want to split functionality. For that I would simply use:
var ltie9 = $.browser.msie && parseInt($.browser.version, 10) < 9;
and then do whatever you want by using:
if (ltie9) { ... }
I've got a jsFiddle that shows several different IE detections up to IE10 just to demonstrate.
Use object detection. IE7 doesn't provide a querySelector method, so for example replace
if ($.browser.msie && parseInt($.browser.version, 10) <= 8)
with
if (document.all && !document.querySelector)
Here are some more ideas
IE8 can be used as and act like IE7-
to distinguish, you can test document.documentMode
adding a property to the navigator object saves having to test again
//(Run= {};
if(window.addEventListener){
Run.handler= function(who, typ, fun){
if(who && who.addEventListener) who.addEventListener(typ, fun, false);
}// all browsers except IE8 and below
}
else if(window.attachEvent){
/*#cc_on
#if(#_jscript_version>5.5){
navigator.IEmod= document.documentMode?
document.documentMode:window.XMLHttpRequest? 7:6;
}
#end
#*/
Run.handler= function(who, typ, fun){
if(who && who.attachEvent){
who.detachEvent('on'+typ, fun);
who.attachEvent('on'+typ, fun);
}
}
}

How do I redirect a page based on the browser user agent?

I am using this script to detect the string "safari" in the user agent header which then redirects you to "android.html" how would I change the code to make it so it redirects if the user agent header does NOT contain "safari"?
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("safari") > -1; //&& ua.indexOf("mobile");
if(isAndroid) {
window.location = 'android.html';
}
EDIT:
Here is my revised code. Does this make sense? It first detects whether the device is android or not then it redirects if it is a safari browser.
var ua = navigator.userAgent.toLowerCase();
var isAndroid = ua.indexOf("android") > -1;
var isSafari = ua.indexOf("safari") == -1;
if(isAndroid) {
if(isSafari) {
window.location = 'android.html';
}
}
if(!isAndroid) {
window.location = 'android.html';
}
Just to go with the name of the variable, change the condition from > -1 to == -1.
var isAndroid = ua.indexOf("safari") == -1;
if(isAndroid) {
window.location = 'android.html';
}
Browser specific detection is usually not the preferred approach as it's usually better to use feature detection. Have you thought about modernizr?
http://www.modernizr.com/

Categories