Post
Ask Question

How To Get Window History In TypeScript

Introduction

 
The window.history object represents the user's history list of viewed web pages. The history object is an array that holds a history of the pages that have been loaded. The amount of information you can get from the history object is limited. The properties and methods of the history object are limited. Since there is no way to determine the position of the current URL in the history object.
 
The history.back() method loads the previous URL in the history list. It is equivalent to clicking the Back button in the browser and the second method of history is the forward() method that loads the next URL in the history list. It is equivalent to clicking the forward button in the browser.
 
The following example shows the browser history using a web application in TypeScript. In this example we use two functions, Back() and Forward(). In the Back() function we call history.back() method, it loads the previous URL in the history list and the Forward() function calls the history.forward() method, it loads the next URL in the history list.
 
Step 1
 
Open Visual Studio 2012 and click "File" -> "New" -> "Project...". A window is opened. In this window, click "HTML Application for TypeScript" under Visual C#.
 
Give the name of your application as "Window_History" and then click "Ok".
 
Step 2
 
The project will then be created. A new window is opened on the right side. This window is called the Solution Explorer. The Solution Explorer contains the ts, js, css and aspx page files.
 

Coding

 
app.ts
  1. class Window_History {  
  2.  Back() {  
  3.   window.history.back();  
  4.  }  
  5.  Forward() {  
  6.   window.history.forward();  
  7.  }  
  8. }  
  9. window.onload = () => {  
  10.  var obj = new Window_History();  
  11.  var objback = < HTMLButtonElement > document.getElementById("Back");  
  12.  objback.onclick = function() {  
  13.   obj.Back();  
  14.  }  
  15.  var objforward = < HTMLButtonElement > document.getElementById("Forward");  
  16.  objforward.onclick = function() {  
  17.   obj.Forward();  
  18.  }  
  19. };  
Window_History_Demoaspx.aspx
  1. <%@PageLanguage="C#"AutoEventWireup="true"CodeBehind="Window_History_Demoaspx.aspx.cs"  
  2. Inherits="Window_History.Window_History_Demoaspx"%>  
  3. <!DOCTYPEhtml>  
  4. <html  
  5.     xmlns="http://www.w3.org/1999/xhtml">  
  6.     <headrunat="server">  
  7.         <title></title>  
  8.         <scriptsrc="app.js">  
  9.         </script>  
  10.     </head>  
  11.     <body>  
  12.         <formid="form1"runat="server">  
  13.             <div>  
  14.                 <asp:LabelID="Label1"runat="server"Font-Bold="True"Font-Italic="True"Font-Size="Large"ForeColor="Blue"Text="Window History In TypeScript">  
  15.                 </asp:Label>  
  16.             </div>  
  17.         </form>  
  18.         <p>  
  19.             <inputid="Back"type="button"value="Back"/>        
  20.             <inputid="Forward"type="button"value="Forward"/>  
  21.         </p>  
  22.     </body>  
  23. </html>  
app.js
  1. var Window_History = (function() {  
  2.  function Window_History() {}  
  3.  Window_History.prototype.Back = function() {  
  4.   if (!window.history.back()) {  
  5.    alert("No Any Previous URL in The History List");  
  6.   }  
  7.  };  
  8.  Window_History.prototype.Forward = function() {  
  9.   window.history.forward();  
  10.  };  
  11.  return Window_History;  
  12. })();  
  13. window.onload = function() {  
  14.  var obj = new Window_History();  
  15.  var objback = document.getElementById("Back");  
  16.  objback.onclick = function() {  
  17.   obj.Back();  
  18.  };  
  19.  var objforward = document.getElementById("Forward");  
  20.  objforward.onclick = function() {  
  21.   obj.Forward();  
  22.  };  
  23. };  
Output 
 
Image.gif
 
Referenced By
http://www.typescriptlang.org/


Similar Articles