astralaaron Posted October 20, 2013 Share Posted October 20, 2013 I am having a bit of trouble detecting opera as the browser (using opera on windows right now). Any tips? http://www.w3schools.com/js/tryit.asp?filename=try_nav_all The example on w3schools at the link above outputs this info: Browser CodeName: Mozilla Browser Name: Netscape Browser Version: 5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 OPR/17.0.1241.45 Cookies Enabled: true Platform: Win32 User-agent header: Mozilla/5.0 (Windows NT 6.1; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/30.0.1599.69 Safari/537.36 OPR/17.0.1241.45 User-agent language: undefined I've been messing with something like this: var ua= navigator.userAgent; M= ua.match(/(opera|opr|msie|firefox|chrome|safari)/?s*([d.]+)/i) || []; but M finds chrome and not the OPR Link to comment Share on other sites More sharing options...
Ingolme Posted October 20, 2013 Share Posted October 20, 2013 Browser detection is very unreliable. Look at the userAgent string to see what Opera is giving it. Why do you want to know what browser the user has? Link to comment Share on other sites More sharing options...
Hadien Posted October 21, 2013 Share Posted October 21, 2013 in general cross-browser javascript works via feature detection, not browser detection. Having javascript depend on a per-browser basis leads to very inflexible, weak code. if a new browser comes out or a current one has an update, you'd have to come back to this code and make it even more excessively complex. an example of definening a cross-browser addEvent. var addEvent = function (el, ev, fn) { //for nearly every browser (W3C) if (el.addEventListener) el.addEventListener(ev, fn, false); //for IE 8 else if (el.attachEvent) el.attachEvent('on' + ev, fn); //fallback else el['on' + ev] = fn; }; the code itself has no context as to what browser is running the code, it just runs what it knows it can support. there are much better ways to write that code, but this is the most straightforward. like Ingolme alluded to, unless you need to know the browser for some other reason than affect javascript code, you should probably not even try to find out. Link to comment Share on other sites More sharing options...
astralaaron Posted October 21, 2013 Author Share Posted October 21, 2013 Browser detection is very unreliable. Look at the userAgent string to see what Opera is giving it. Why do you want to know what browser the user has? Because I just want to know if they are on a browser which supports the Canvas. It is just for a Marquee...for newer browsers I am using a Canvas marquee that I made. For older versions I am falling back on the <marquee> element.... I can detect safari, chrome, firefox and IE without issues. It's just Opera that is giving me problems Link to comment Share on other sites More sharing options...
astralaaron Posted October 21, 2013 Author Share Posted October 21, 2013 I realize now there is an easier way to go about this... basically just attempting to create a canvas and checking for true / false http://stackoverflow.com/questions/2745432/best-way-to-detect-that-html5-canvas-is-not-supported Link to comment Share on other sites More sharing options...
davej Posted October 21, 2013 Share Posted October 21, 2013 Is Modernizr needed because if you just check "if (functionname)" the HTML5 function might exist but not work correctly? Link to comment Share on other sites More sharing options...
Hadien Posted October 21, 2013 Share Posted October 21, 2013 (edited) don't follow that first answer, follow the one right below it. like he said the 1st one forces you to create an element to test and that is both slow and unnecessary (but does the trick). var canCanvas = (!!window.HTMLCanvasElement && !!window.CanvasRenderingContext2D); I'm also using memoization here. the inital code I was gonna show you was a lot slower so I memoized it (redefined the function inside itself as a computing optimization). then after several, sevral iterations of simplifying the code I got to this basically it makes the check and assigns automatically when the page loads and thus you just need to make a call like: if(!canCanvas){ //do this stuff since the canvas isn't supported } I haven't tested this myself, but should hold across all browsers and most platforms (mobile devices is out of my territory though) Edit: don't even need to run it as a function, just simplified it further. Edited October 21, 2013 by Hadien Link to comment Share on other sites More sharing options...
astralaaron Posted October 21, 2013 Author Share Posted October 21, 2013 Thank you, I appreciate the response Link to comment Share on other sites More sharing options...
thescientist Posted October 24, 2013 Share Posted October 24, 2013 var canCanvas = (!!window.HTMLCanvasElement && !!window.CanvasRenderingContext2D); Why the double !!'s? Why not just var canCanvas = (window.HTMLCanvasElement && window.CanvasRenderingContext2D); Link to comment Share on other sites More sharing options...
Ingolme Posted October 24, 2013 Share Posted October 24, 2013 !! is a quick way to cast a variable to boolean. Though I don't think it's extremely important here. Link to comment Share on other sites More sharing options...
Hadien Posted October 25, 2013 Share Posted October 25, 2013 You're right. It is unnecessary.Since I'm using an && operator it's redundant, but in general a !! is a quick way to see if a property was defined. Though not as accurate as a typeof, especially when the variable can already be a boolean. Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now