Home     RSSRSS

Posts Tagged ‘HTML5’

Dealing with Browser’s back Button with Headers and Javascript History Object

August 28, 2012 by kiranbadi1991 | Comments Off on Dealing with Browser’s back Button with Headers and Javascript History Object | Filed in Browser, Development, Environment, Others, Testing

Quite often while coding application which has lot of forms in it, there comes a requirement where in developers needs to deal with back button functionality of the browser.Disabling the back button with Javascript is one of the options used by many sites to deal with duplicate submission of forms.

Browsers maintain information about pages visited in the browser’s history and Javascript can be used to manipulate the history using windows.history object.

Some of the methods which we can use to know more about history are.

window.history.back();
This works exactly as back button of the browser.Goes 1 page back.
window.history.forward();
This works as exactly as forward button of the browser.Goes 1 page forward.
The number of pages in the history stack of the browser can be determined reading its length property,
window.history.length
We can go back and forth in the history  identified by using current position of the page,
 
window.history.go(-1);
window.history.go(1);
go function is used to load relevant pages from the history. go(-1) loads the 1 page backwards from the current page and go(1) moves the browser 1 page ahead from the current page.
 
HTML 5 History object also provides good way to deal with History management of the browsers, some of the functions in HTML 5 are as below,(Reference: Opera Dev Library)
  • window.history.length: Returns the number of entries in the joint session history.
  • window.history.state: Returns the current state object.
  • window.history.go(n): Goes backwards or forwards by the specified number of steps in the joint session history. If the value you specify is zero, it will reload the current page. If it would cause the target position to be outside the available range of the session history, then nothing happens.
  • window.history.back(): Goes backwards by one step in the joint session history. If there is no previous page to go to, it does nothing.
  • window.history.forward(): Goes forwards by one step in the joint session history. If there is no next page to go to, it does nothing.
  • window.history.pushState(data, title [, url]): Pushes the data specified in the arguments onto the session history, with the given title and URL (the URL is optional).
  • window.history.replaceState(data, title [, url]): Updates the current entry in the session history, with the given data, title and URL (the URL is optional)

History object of HTML5 gives us the tool to push/replace the url in the browser’s history and its this feature which I believe is somewhat in secure in nature.Maybe we can have some warning message whenever some scripts wants to read or write the history of the user’s browser exactly the way geolocation api’s work.

Anyways coming back to our topic, we can also use the javascript to control the behavior of the back button,one of the ways quite often used is

function disablebackbutton()
    {window.history.forward()}
disablebackbutton();
window.onload=disablebackbutton;
window.onpageshow=function(evt){if(evt.persisted)disablebackbutton()}
window.onunload=function(){void(0)}
This is most ugly way of dealing back button problem.Just disable it on onload and onpageshow events.

Another clean way of dealing with back button issue is tell browsers not the cache or store any information of the page in its history and this can achieved by setting appropriate headers.With Servlets and JSP , this can done  by

    response.setHeader("Pragma", "no-cache");
    response.setHeader("Cache-Control", "no-store");
    response.setHeader("Expires", "0");
    response.setDateHeader("Expires", -1);

These headers can be added to any page which requires that it should not be cached or reused in any way.I did go via header’s approach did resolve the back button issue.Now whenever I use back button I get Page expired message and for some pages form values are not pulled out from cache.

I would suggest going via header’s approach as this can be done at server side and has very limited or low dependency of the clients and most browsers honors those headers.

Technorati Tags: ,,,
 
 
 
 
 

Tags: , , ,

HTML 5 New Form Elements and its Benefits

January 28, 2012 by kiranbadi1991 | Comments Off on HTML 5 New Form Elements and its Benefits | Filed in Browser, Development

HTML 5 has some fantastic changes to the form elements which I feel is surely going to make the life of the developers somewhat easy as now they might have to write less code to do some of form validation work. Use of these HTML Tags as part of form means you write less code and do less amount of testing since the real implementation and validation is now done by the browsers.

In all there should be around 10 to 15 new form HTML tag elements which I feel is going to be implemented as part of HTML 5 Specs. Below are the some of the new form elements which I feel are going to be introduced in HTML 5,

· search – This is going to be used for Search text field.

· tel – This is going be used as text field which will accept telephone numbers. It also has pattern attribute to customize according to one’s requirement.

· url – This field is going to accept the url of the site.

· email – This field will accept only email addresses. It has the attribute which can accept multiple email addresses in the same field.

· color – Shows up the color picker control.

· number – This field designed to accept the numerical input. It supports the pattern wherein the user can be restricted to give only numbers in the field.

As of now these HTML 5 elements are not fully supported by browsers, but I have tested this in latest version of Google chrome and Firefox, they do support these tags.

Below is the sample code which I tried in chrome and Firefox,

<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<title>HTML5 Form Elements</title>
</head>

<body>
<form method="post" enctype="multipart/form-data" name="form1">
    <p>
        <label for="search">Search:</label>
        <input type="search" name="Search" id="idsearch">
    </p>
    <p>
        <label for="tel">Phone:</label>
        <input type="tel" name="Phone" id="idphone">
    </p>    
   <p>
        <label for="url">Website Details:</label>
        <input type="url" name="website" id="idurl">
    </p>
    <p>
        <label for="email">Email:</label>
        <input type="email" name="email" id="idemail" multiple>
    </p>
    <p>
        <label for ="number"> Lucky Number : </label>
        <input type="number" name="luckynumber" pattern="int">
    </p>
    <p>
        <label for="color">Select color:</label>
        <input type="color" name="colorn" id="idcolor">
    </p>
    <p>
        <input type="submit" name="send" id="send" value="Submit">
    </p>
</form>

</body>
</html>

Don’t me believe, copy paste this code in notepad and save it as html document and open this in Firefox and chrome and use your testing mind and see for yourself how much testing and development efforts you can save when you use these tags as part of your development practice.

Tags: , ,

Javascript:Check if browser supports HTML 5 Geolocation Object

January 7, 2012 by kiranbadi1991 | Comments Off on Javascript:Check if browser supports HTML 5 Geolocation Object | Filed in Browser, Development

Geolocation Object is one of the cool features of the HTML 5.It is definitely going to make life easier for companies or sites which are predominantly in B2C category who can now make more bucks compare to other domains as they can now chalk out unique location based strategy for their customers.In addition to these domains, Geolocation can also used for various other purposes like security/tracking the missing people etc. though other techniques of tracking devices like using GPS/Cell id etc. are also as effective as Geolocation.But I guess Geolocation technique used via browsers will be one of the most cheapest ways of implementing location based strategy provided users gives the consent for tracking their locations.

However I would like to highlight here that W3C standards for some reasons have suggested implementation of  this object with caveat that information obtained via geolocation might not be fully accurate enough.Though I agree to this and consider it as fair enough suggestions given that depth and breadth of the pattern of its usage across various devices and situations varies.So in layman terms, it cannot be used legally with additional data to substantiate the proof of the location.But again benefits outweighs the risks here and that’s the reason I feel its one of the best things that has ever happened to web in recent times.

While experimenting with Geolocation Object of HTML 5, I wrote the small piece of JS code which I believe can tell us whether the browser supports Geolocation object or not.

Below is the sample HTML Empty code which loads the checkgeo javascript and dynamically creates the p element and then writes the user agent information giving the message whether the user agent supports Geolocation object or not.

The function checkgeolocationobject is part of checkgeo.js file and it needs to be present in the JS file.You can also have this function in the script tag of the HTML page.

<!DOCTYPE HTML>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>HTML 5 Geolocation Check</title>
<style type="text/css">
p{
    font-family:Verdana;
    font-size:16;
    font-weight:bold;
}
</style>
<script type ="text/javascript" src="js/checkgeo.js">
</script>
</head>

<body onload="checkgeolocationobject()">

</body>
</html>
 
The Javascript piece which checks geolocation objects is as below.
function checkgeolocationobject(){
    if(window.navigator.geolocation){
        var para = document.createElement('p');
 var message = document.createTextNode("Yes we support Geolocation fully for "
 + navigator.userAgent);
        para.appendChild(message);
        document.body.appendChild(para);
        document.styleSheets[0].addRule("p", "color:blue", 0);
    }
    else {
        var para = document.createElement('p');
var message = document.createTextNode("No we do not support Geolocation fully for "
 + navigator.userAgent);
        para.appendChild(message);
        document.body.appendChild(para);
        document.styleSheets[0].addRule("p", "color:red", 0);
    }
}

 


Technorati Tags: ,

Tags: ,