JavaScript - SPLessons

JavaScript Device Detection

Chapter 26

SPLessons 5 Steps, 3 Clicks
5 Steps - 3 Clicks

JavaScript Device Detection

JavaScript Device Detection

shape Description

JavaScript Device Detection is nothing but when a website is opened in random, some of the websites have the tendency to change as per the device being used (ex.laptop,mobiles), while some may not have that adaptability, which makes those websites lose their mobile audiences. So, to overcome this problem, there are two solutions:

Device redirection script

shape Description

From the above description, creating a mobile website may not be possible for all the website creators. The easiest way to go with- is to redirect to a site for mobile users. This can be done by placing the site URL in the document.location object.

shape Example

<html>
	<head>

		<script type="text/javascript">
			document.write("The screen width is : ", screen.width);
			if (screen.width <= 699) {
			document.location = "http://m.splessons.com";
			}

		</script>
	</head>
	<body>
	</body>
</html>

Output:
The above example explains that if the screen size is less than 699 pixels, the site has to be redirected to the splessons.com mobile version.”m” in the URL tells that the URL is mobile version. Otherwise, no output will be shown.

Window Location Detection

shape Description

Location object detects the current location of HTML document and is a read-only property. The functions of location object are:

  • Get and display the current URL: This is done using window.location.href
  • Return the web host port: This is done using window.location.hostname
  • Returns the protocol used for web: This is done using window.location, protocol
  • Returns the path and filename of the current web page: This is done using window.location.protocol
  • Loading a new document: This is done using window.location.assign

Location object is a object in itself because properties are reused in the rest of BOM.

Window Location href property

The main property in Location Object is the href property, which returns the URL of the current page and can be used in redirecting the browser to a new URL. All other properties or methods are derived from this property only. The Window “prefix” is optional while using Location object.

<!DOCTYPE html>
<html>
	<body>

		<p id="text"></p>

		<script>

			document.getElementById("text").innerHTML = location.href;

		</script>

	</body>
</html>

Output:

Window Location Pathname Property

The pathname property is used to return the current URL pathname. This helps in easy navigation when the web address is very long. The below example shows the path of a page.

<!DOCTYPE html>
<html>
	<body>

		<p>Display the path name of the current URL.</p>

		<p id="demo"></p>

		<script>
			document.getElementById("demo").innerHTML = "Page path is: " + window.location.pathname;
		</script>

	</body>
</html>

Output:

Window Location assign Property

To load a new document when a button is clicked, Location assign() method is used. It can store the document history and navigate to the previous pages when clicked on back button.

Other than opening a new document it cannot perform any action and this property is placed in a function. Below example assigns the splessons site to the load document event.

<!DOCTYPE html>
<html>
	<head>
		<script>
			function newPage() {
				window.location.assign("https://www.splessons.com");
			}
		</script>
	</head>
	
	<body>
		<input type="button" value="Load new document" onclick="newPage()">
	</body>
</html>

Output:

When the above button is clicked, the following page appears.

Window Browse History

shape Description

Session history of current window can be accessed using the Window History Object. Restrictions are made while using this object to protect the user’s privacy. This will not clear the current session history or disable back and forward navigation. The object can be used without the “window” prefix.

There are two methods in Window history object, they are:


history.back()

To move one step back in session history, history.back() method is used. This works when a button or clickable elements are used.

history.forward()

To move the session history to the next URL, history.forward() method is used. If there are no URL’s in the history list, the button will not perform any action.

Below is an example for Window Browse History method showing Back and Forward buttons.

Summary

shape Key Points

  • JavaScript Device Detection can be done using the location object.
  • HREF, Pathname and assign are some of the properties of Location object.
  • HREF gives the location of URL.
  • Browser history has back() and forward() methods.