Commit ced23ea

authored

Merge pull request #41 from AzharAli-github/main

web-history

2 parents 19c3118 + a9b7742 commit ced23eaCopy full SHA for ced23ea

File tree

+69

-0

lines changed

JavaScript/Advance/Web API/web-history API
- images
  - js-logo.png
- index.html
- script.js

+69

-0

lines changed

4.15 KB

Lines changed: 27 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,27 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+`
	`4`	`+<head>`
	`5`	`+ <meta charset="UTF-8">`
	`6`	`+ <meta http-equiv="X-UA-Compatible" content="IE=edge">`
	`7`	`+ <meta name="viewport" content="width=device-width, initial-scale=1.0">`
	`8`	`+ <title>web-history API</title>`
	`9`	`+</head>`
	`10`	`+`
	`11`	`+<body>`
	`12`	`+ <h1>Web History API</h1>`
	`13`	`+ <button id="viewDoc">View Doc</button>`
	`14`	`+ <p id="textOne"></p>`
	`15`	`+ <!-- First Example -->`
	`16`	`+ <h2>History back()</h2>`
	`17`	`+ <button onclick="DisplayTwo()">Back</button>`
	`18`	`+ <!-- Second Example -->`
	`19`	`+ <h2>History go()</h2>`
	`20`	`+ <button onclick="DisplayThree()">go 2 files back</button>`
	`21`	`+ <!-- Third Example -->`
	`22`	`+ <h2>History forward()</h2>`
	`23`	`+ <button onclick="DisplayFour()">forward</button>`
	`24`	`+ <script src="script.js"></script>`
	`25`	`+</body>`
	`26`	`+`
	`27`	`+</html>`

Lines changed: 42 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,42 @@`
	`1`	`+// In this lesson we will learn about Web History API`
	`2`	`+`
	`3`	`+let textOne = document.getElementById('textOne');`
	`4`	`+let viewDoc = document.getElementById('viewDoc');`
	`5`	`+`
	`6`	`+viewDoc.addEventListener("click", () => {`
	`7`	`+ let x = true;`
	`8`	`+ if (x == true) {`
	`9`	+ textOne.innerHTML = `
	`10`	`+ <p>The Web History API provides easy methods to access the windows.history object.</p>`
	`11`	`+ <p>The window.history object contains the URLs (Web Sites) visited by the user.</p>`
	`12`	`+ <h1>There are three main types of History API</h1>`
	`13`	`+ <li>back()</li>`
	`14`	`+ <li>go(-2)</li>`
	`15`	`+ <li>forward()</li>`
	`16`	`+ <h2>Check the Examples Below with the .js files for better Understanding</h2>`
	`17`	`+ <p style ="font-family: monospace; color: red;">This will work when we are having more than one web pages in a website</p>`
	`18`	+ `
	`19`	`+ x = false;`
	`20`	`+ } else {`
	`21`	`+ textOne.innerHTML.style.display = "none";`
	`22`	`+ x = true;`
	`23`	`+ }`
	`24`	`+})`
	`25`	`+`
	`26`	`+// History back()`
	`27`	`+`
	`28`	`+function DisplayTwo() {`
	`29`	`+ window.history.back();`
	`30`	`+}`
	`31`	`+`
	`32`	`+// History go()`
	`33`	`+`
	`34`	`+function DisplayThree() {`
	`35`	`+ window.history.go(-2);`
	`36`	`+}`
	`37`	`+`
	`38`	`+// History forward()`
	`39`	`+`
	`40`	`+function DisplayFour() {`
	`41`	`+ window.history.forward();`
	`42`	`+}`

Comments

(0)