Monday, 16 December 2013

HTML5 - History API

Folks,

Today I would like to introduce you to the history API of HTML5. This feature is very helpful in a hybrid application where you want back and forward buttons are to be implemented.

How to get back/forward button events?

The global object window provides an event called popstate which will be invoked when user clicks on back/forward button. In case of CHROME and SAFARI, the same event will be invoked when the page is loaded too.  


 <script>  
 window.addEventListener('popstate', function(event){  
      alert(event.state);  
 });  
 </script>  



How to programmatically triggers back and forward buttons ?

Consider a scenario where you want to go back to previous page or next page in history upon click of a button in the HTML page. This can be programmatically done using back and forward APIs.

Create 2 html pages called Page1.html and Page2.html as follows.

Page1.html
<script src="historytest.js"></script>

<button id="bkbtn">back button</button>
<button id="fwbtn">forward button</button>

<h1>Page1</h1>

<a href="Page2.html">go to Page 2</a>

Page2.html
<script src="historytest.js"></script>

<button id="bkbtn">back button</button>
<button id="fwbtn">forward button</button>

<h1>Page2</h1>

<a href="Page1.html">go to Page 1</a>

historytest.js
window.onload = function() {

    document.querySelector("#bkbtn").addEventListener("click", backHistory, false);
    document.querySelector("#fwbtn").addEventListener("click", forwardHistory, false);

};

function backHistory(event){
    if(window.history) {
        history.back();
    }
}

function forwardHistory(event){
    if(window.history) {
        history.forward();
    }
}

You can see that once you click on "go to Page 2" link from Page1.html, back button and forward button works exactly as browser buttons. You can also use history.go(index) to jump directly to a specific page where index is the order of the page in history.

Now consider another scenario where you do not want the entire web page to be reloaded. Instead just refresh some specific content just like Ajax requests work. History APIs provide another set of APIs to handle these scenarios as well which are called PushState and ReplaceState respectively.

Lets forget about HTML buttons and focus on the page content. If you look closely, you can notice that Page1 and Page2 differs only in header and anchor tag information. If you get these info from a JSON object, there is no need to reload the entire page. But where to store these object and how do we get these data when required. History APIs are here to help you.

Page.html
<script src="history.js"></script>

<h1 id="header"></h1>

<a id="link"></a>

history.js

window.addEventListener('popstate', function(event){
    console.log(event.state);
    updateContent(event.state);
});


var data = {
    page1: {
        header: "Page 1",
          anchorsrc: "Page2.html",
          anchorlabel: "go to Page2"
    },
    page2: {
        header: "Page 2",
          anchorsrc: "Page1.html",
          anchorlabel: "go to Page1"
    }
};
var headerElement, anchorElement;

window.onload = function() {

    headerElement = document.getElementById('header');
    anchorElement = document.getElementById('link');
    updateContent(data.page1);

    document.getElementById("link").addEventListener("click", 
        function(event){
            event.preventDefault();
            var index = 'page1';
            if(document.getElementById('header').innerHTML=='Page 1') {
                index = 'page2';
            }
            updateContent(data[index]);

            history.pushState(data[index], data[index].header, data[index].anchorsrc);

        }, false);
    
};

function updateContent(stateObj) {
    if (stateObj) {
        headerElement.innerHTML = stateObj.header;
          anchorElement.href = "stateObj.anchorsrc";
          anchorElement.innerHTML = stateObj.anchorlabel;
    }
};


history.replaceState() API provides the same functionality as that of pushState API except the fact that the former updates the current state where as the latter creates a new one.

Happy coding!

1 comment:

  1. trải qua ba ngày, Phá Quân Bang cũng đã bổ nhiệm thêm một ngũ tinh Đấu vương trưởng lão.

    Ba ngày nay Phá Quân Bang đánh các thế lực nhỏ, một số thế lực trung tầng cũng bị xóa tên.
    đồng tâm
    game mu
    cho thuê phòng trọ
    cho thuê phòng trọ
    nhac san cuc manh
    tư vấn pháp luật qua điện thoại
    văn phòng luật
    số điện thoại tư vấn luật
    dịch vụ thành lập doanh nghiệp
    Bây giờ hiện tại Phá Quân Bang đã có hơn bảy mươi người gia nhập, tổng cộng là ba trăm người, chuyện này khiến cho Nhạc Thành cao chứng. Mục tiêu của Nhạc Thành là sau khi rời khỏi học viện đấu khí có thể mang ra đội ngũ ba trăm người tinh nhuệ, cộng thêm với việc mình dụng tâm bồi dưỡng, ba trăm người này có thể đột phá tới Đấu Hoàng trong vòng mười năm tới.

    Về phần người của Đổng Đại Ngưu, Nhạc Thành có mục tiêu trong vòng tám năm mười năm có một vạn người, trong đó cao thủ đấu vương phải có ba nghìn người, đây là những thế lực tinh th như vậy, hừng đông hôm sau Nhạc Thành mới tái nhợt sắc mặt đi ra. Trải qua một đêm luyện chế, cuối cùng Vô Thượng Khốn Tiên pháp và Âu dương Kiếm cũng đã được luyện chế thành công.

    Với cấp bậc của Vô Thượng Khốn Tiên tháp và Âm Dương kiếm hiện tại mà nói,

    ReplyDelete