Getting Browser and Platform Details in JavaScript

As you design apps, you have to consider the user’s browser and platform. Often, you find that you must tailor an app’s UI to the features and limitations of user environments. You might, for example, display one set of controls to a user on browser/platform A and a different set to a user on browser/platform B. The Liferay.Browser object’s methods can determine a user’s browser, operating system, and device type. This tutorial describes these methods and shows how to use them.

First, you can determine a browser’s type and version.

Getting Browser Details

The following methods return true if the user’s browser matches the type:

isChrome: Returns true if the browser is Google Chrome.

isFirefox: Returns true if the browser is Mozilla Firefox.

isIe: Returns true if the browser is Microsoft Internet Explorer.

isSafari: Returns true if the browser is Apple Safari.

isOpera: Returns true if the browser is Opera.

The following methods return information about a user’s browser version and revision:

getVersion: Returns the browser’s version number (e.g., 44.0).

getMajorVersion: Returns the starting whole number portion of the browser’s version number (e.g., 44).

getRevision: Returns the browser’s revision number (e.g., 537.29). The revision number might have no resemblance to the version number.

Now that you’re familiar with the browser type and version methods, you can learn how to get a user’s platform information.

Getting Platform Details

The Liferay.Browser object has methods that can help you determine the user’s platform, including the user’s device type and operating system.

Here are the platform detail methods:

isMobile: Returns true if it’s a mobile device.

isIphone: Returns true if the device is an Apple iPhone.

isMac: Returns true if the device is an Apple Mac.

isLinux: Returns true if the operating system is Linux.

isWindows: Returns true if the operating system is Microsoft Windows.

Below is a code snippet that demonstrates how to use these methods in a main.js file in a portlet’s docroot/js/ folder:

function checkBrowser() {
    if(Liferay.Browser.isFirefox() && Liferay.Browser.getMajorVersion() > 30) {
        //code to execute goes here
    }
}

Such JavaScript functions can be referenced in the portlet’s JSP’s. In a JSP, the following input tag associates the previous function with a button’s click event:

<input type="button" value="click me" onclick="checkBrowser()" />

You can use Liferay.Browser object’s methods to cater to users on various browsers and platforms.

Getting IDs, Paths, and Sign-in Details in JavaScript

User Interfaces with AlloyUI

User Interfaces with the Liferay UI Taglib

« Introduction to JavaScript in LiferayGetting IDs, Paths, and Sign-in Details in JavaScript »
この記事は役に立ちましたか?
0人中0人がこの記事が役に立ったと言っています