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:
- Creating a mobile website
- Redirecting to a site for mobile users.
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.
Example
[javascript]
<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>
[/javascript]
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.
Description
Location object detects the current location of HTML document and is a read-only property. The functions of location object are:
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.
[c]
<!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>
[/c]
Output:
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.
[c]
<!DOCTYPE html>
<html>
<head>
<script>
function newPage() {
window.location.assign("http://www.splessons.com");
}
</script>
</head>
<body>
<input type="button" value="Load new document" onclick="newPage()">
</body>
</html>
[/c]
Output: 
When the above button is clicked, the following page appears.
- 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
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:
To move one step back in session history, history.back() method is used. This works when a button or clickable elements are used.
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.
- history.back()
- history.forward()
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.