Modify a href link value based on mobile OS

Question

I want to read the OS of the system the user is browsing and offer him the relevant kind of redirect to the App store or Google Play.

If the user clicks on the app icon in my website it would be redirected to the appropriate store based on the device.

I believe i can read the OS using javascript and the if function but i don't know how to append the actual url that sits behind the tag.

Answer 1

You can use this script to get the desired implementation.

Reference: https://stackoverflow.com/a/18706818/8179245

 /** * JavaScript Client Detection * (C) viazenetti GmbH (Christian Ludwig) */ (function (window) { document.getElementById("ios").style.display = "none"; document.getElementById("android").style.display = "none"; { var unknown = '-'; // screen var screenSize = ''; if (screen.width) { width = (screen.width) ? screen.width : ''; height = (screen.height) ? screen.height : ''; screenSize += '' + width + " x " + height; } // browser var nVer = navigator.appVersion; var nAgt = navigator.userAgent; var browser = navigator.appName; var version = '' + parseFloat(navigator.appVersion); var majorVersion = parseInt(navigator.appVersion, 10); var nameOffset, verOffset, ix; // Opera if ((verOffset = nAgt.indexOf('Opera')) != -1) { browser = 'Opera'; version = nAgt.substring(verOffset + 6); if ((verOffset = nAgt.indexOf('Version')) != -1) { version = nAgt.substring(verOffset + 8); } } // Opera Next if ((verOffset = nAgt.indexOf('OPR')) != -1) { browser = 'Opera'; version = nAgt.substring(verOffset + 4); } // Edge else if ((verOffset = nAgt.indexOf('Edge')) != -1) { browser = 'Microsoft Edge'; version = nAgt.substring(verOffset + 5); } // MSIE else if ((verOffset = nAgt.indexOf('MSIE')) != -1) { browser = 'Microsoft Internet Explorer'; version = nAgt.substring(verOffset + 5); } // Chrome else if ((verOffset = nAgt.indexOf('Chrome')) != -1) { browser = 'Chrome'; version = nAgt.substring(verOffset + 7); } // Safari else if ((verOffset = nAgt.indexOf('Safari')) != -1) { browser = 'Safari'; version = nAgt.substring(verOffset + 7); if ((verOffset = nAgt.indexOf('Version')) != -1) { version = nAgt.substring(verOffset + 8); } } // Firefox else if ((verOffset = nAgt.indexOf('Firefox')) != -1) { browser = 'Firefox'; version = nAgt.substring(verOffset + 8); } // MSIE 11+ else if (nAgt.indexOf('Trident/') != -1) { browser = 'Microsoft Internet Explorer'; version = nAgt.substring(nAgt.indexOf('rv:') + 3); } // Other browsers else if ((nameOffset = nAgt.lastIndexOf(' ') + 1) < (verOffset = nAgt.lastIndexOf('/'))) { browser = nAgt.substring(nameOffset, verOffset); version = nAgt.substring(verOffset + 1); if (browser.toLowerCase() == browser.toUpperCase()) { browser = navigator.appName; } } // trim the version string if ((ix = version.indexOf(';')) != -1) version = version.substring(0, ix); if ((ix = version.indexOf(' ')) != -1) version = version.substring(0, ix); if ((ix = version.indexOf(')')) != -1) version = version.substring(0, ix); majorVersion = parseInt('' + version, 10); if (isNaN(majorVersion)) { version = '' + parseFloat(navigator.appVersion); majorVersion = parseInt(navigator.appVersion, 10); } // mobile version var mobile = /Mobile|mini|Fennec|Android|iP(ad|od|hone)/.test(nVer); // cookie var cookieEnabled = (navigator.cookieEnabled) ? true : false; if (typeof navigator.cookieEnabled == 'undefined' && !cookieEnabled) { document.cookie = 'testcookie'; cookieEnabled = (document.cookie.indexOf('testcookie') != -1) ? true : false; } // system var os = unknown;/* var clientStrings = [ {s:'Windows 10', r:/(Windows 10.0|Windows NT 10.0)/}, {s:'Windows 8.1', r:/(Windows 8.1|Windows NT 6.3)/}, {s:'Windows 8', r:/(Windows 8|Windows NT 6.2)/}, {s:'Windows 7', r:/(Windows 7|Windows NT 6.1)/}, {s:'Windows Vista', r:/Windows NT 6.0/}, {s:'Windows Server 2003', r:/Windows NT 5.2/}, {s:'Windows XP', r:/(Windows NT 5.1|Windows XP)/}, {s:'Windows 2000', r:/(Windows NT 5.0|Windows 2000)/}, {s:'Windows ME', r:/(Win 9x 4.90|Windows ME)/}, {s:'Windows 98', r:/(Windows 98|Win98)/}, {s:'Windows 95', r:/(Windows 95|Win95|Windows_95)/}, {s:'Windows NT 4.0', r:/(Windows NT 4.0|WinNT4.0|WinNT|Windows NT)/}, {s:'Windows CE', r:/Windows CE/}, {s:'Windows 3.11', r:/Win16/}, {s:'Android', r:/Android/}, {s:'Open BSD', r:/OpenBSD/}, {s:'Sun OS', r:/SunOS/}, {s:'Linux', r:/(Linux|X11)/}, {s:'iOS', r:/(iPhone|iPad|iPod)/}, {s:'Mac OS X', r:/Mac OS X/}, {s:'Mac OS', r:/(MacPPC|MacIntel|Mac_PowerPC|Macintosh)/}, {s:'QNX', r:/QNX/}, {s:'UNIX', r:/UNIX/}, {s:'BeOS', r:/BeOS/}, {s:'OS/2', r:/OS\\/2/}, {s:'Search Bot', r:/(nuhk|Googlebot|Yammybot|Openbot|Slurp|MSNBot|Ask Jeeves\\/Teoma|ia_archiver)/} ];*/ var clientStrings = [ {s:'Android', r:/Android/}, {s:'Mac OS X', r:/Mac OS X/}, {s:'Mac OS', r:/(MacPPC|MacIntel|Mac_PowerPC|Macintosh)/}, ]; for (var id in clientStrings) { var cs = clientStrings[id]; if (cs.r.test(nAgt)) { os = cs.s; break; } } var osVersion = unknown; if (/Windows/.test(os)) { osVersion = /Windows (.*)/.exec(os)[1]; os = 'Windows'; } document.getElementById("ios").style.display = "none"; document.getElementById("android").style.display = "none"; switch (os) { case 'Mac OS X': osVersion = /Mac OS X (10[\\.\\_\\d]+)/.exec(nAgt)[1]; break; case 'Android': osVersion = /Android ([\\.\\_\\d]+)/.exec(nAgt)[1]; document.getElementById("android").display = "block"; break; case 'iOS': osVersion = /OS (\\d+)_(\\d+)_?(\\d+)?/.exec(nVer); osVersion = osVersion[1] + '.' + osVersion[2] + '.' + (osVersion[3] | 0); document.getElementById("ios").display = "block"; break; } // flash (you'll need to include swfobject) /* script src="//ajax.googleapis.com/ajax/libs/swfobject/2.2/swfobject.js" */ var flashVersion = 'no check'; if (typeof swfobject != 'undefined') { var fv = swfobject.getFlashPlayerVersion(); if (fv.major > 0) { flashVersion = fv.major + '.' + fv.minor + ' r' + fv.release; } else { flashVersion = unknown; } } } window.jscd = { screen: screenSize, browser: browser, browserVersion: version, browserMajorVersion: majorVersion, mobile: mobile, os: os, osVersion: osVersion, cookies: cookieEnabled, flashVersion: flashVersion }; }(this)); /* alert( 'OS: ' + jscd.os +' '+ jscd.osVersion + '\\n' + 'Browser: ' + jscd.browser +' '+ jscd.browserMajorVersion + ' (' + jscd.browserVersion + ')\\n' + 'Mobile: ' + jscd.mobile + '\\n' + 'Flash: ' + jscd.flashVersion + '\\n' + 'Cookies: ' + jscd.cookies + '\\n' + 'Screen Size: ' + jscd.screen + '\\n\\n' + 'Full User Agent: ' + navigator.userAgent ); */ 

 <a href="#" id="ios" class="store_links">iOS - Apple Store</a> <a href="#" id="android" class="store_links">Android - Play Store</a> 

then based on the OS type just show hide your links.