JavaScript DHTML/Window Browser/History

Материал из Web эксперт
Перейти к: навигация, поиск

A Browser History Count

<HTML>
<HEAD>
<TITLE>History Object</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function showCount() {
    var histCount = window.history.length;
    if (histCount > 5) {
        alert("You have visited " + histCount + " pages so far.");
    } else {
        alert("You have been to " + histCount + " Web pages this session.")
    }
}
</SCRIPT>
</HEAD>
<BODY>
<FORM>
<INPUT TYPE="button" NAME="activity" VALUE="My Activity" onClick="showCount()">
</FORM>
</BODY>
</HTML>



Go Back to previous Page

<html>
<head>
<title>Go Back to previous Page</title>
<script language="javascript">
<!--
function NextPage() {
  history.forward(1);
}
//-->
</script>

</head>
<body>
<a href="javascript:NextPage()">Forward</a><br>
</body>
</html>



Go Back to previous Page using number

<html>
<head>
<title>Go Back to previous Page</title>
<script language="javascript">
<!--
function PreviousPage() {
  history.back(1);
}
//-->
</script>

</head>
<body bgcolor="#ffffff" text="#000000">
<a href="javascript:PreviousPage()">Back</a><br>
</body>
</html>



Go Back to some step

<html>
<head>
<title>Go Back # Chosen</title>
<script language="javascript">
<!--
function PreviousPage() {
  
  var quantity = document.selection.number.value
  window.history.back(quantity);
}
//-->
</script>

</head>
<body bgcolor="#ffffff" text="#000000">
<form name="selection">
<select name="number" onChange="PreviousPage()">
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
  <option value="5">5</option>
</select>
</form>

</body>
</html>



History "back()" Example

    
<html>
<body>
<script language="JavaScript">
    function function1(){
        history.back(1);
    }
</script>
<input type="button" value="Go back" onclick="function1();">
</body>
</html>



History "forward()" Example

    
<html>
<body>
<script language="JavaScript">
    function function1() {
        history.forward();
    }
</script>
<a href="http://www.wbex.ru">Open a new document to build the history object</a>
<input type="button" value="Go forward" onclick="function1();">
</body>
</html>



Methods and Properties of the History Object

  Type         Item             Description
  Method       back()           Loads the last URL in the history list.
               forward()        Loads the next URL in the history list, 
                                assuming you have gone back at some point.
               go()             Loads a URL from the history list by using the offset passed.

  Property
               current          Refers to the current URL in the history list. 
               length           Returns the number of entries in the history list.
               next             Refers to the next URL in the history list. 
               previous         Refers to the previous URL in the history list.



Use history back button

<HTML>
<HEAD>
<TITLE>onBeforeUnload Event Handler</TITLE>
<SCRIPT LANGUAGE="JavaScript">
function verifyClose() {
    event.returnValue = "We really like you and hope you will stay longer.";
}
window.onbeforeunload = verifyClose;
</SCRIPT>
</HEAD>
<BODY>
<H1>onBeforeUnload Event Handler</H1>
<HR>
<P>Use this button to navigate to the previous page:
<BUTTON ID="go" onClick="history.back()">
Go Back
</BUTTON>
</BODY>
</HTML>