window对象历史记录 - 会coding的HAM

window对象历史记录

BG7ZAG

|

2017-7-24 21:54

|

1,774

|

0

|

431 字

|

3 分钟

写三个页面实现点击按钮前进后退等

页面一：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>页面一</title>
<style>
</style>
</head>
<body>
<h1>页面1</h1>
<button onclick="goForward()">前进</button>
<a href="index2.html">跳转到页面2</a>
<script>
function goForward(){
history.forward()
// forward 加载下一个URL 前进
}
</script>
</body>
</html>

页面二：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>页面二</title>
<style>
</style>
</head>
<body>
<h1>页面2</h1>
<button onclick="goBack()">后退</button>
<a href="index.html">跳转到页面1</a>
<a href="index3.html">跳转到页面3</a>
<script>
function goBack(){
history.back()
}
</script>
</body>
</html>

页面三：

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>页面3</title>
<style>
progress{
width: 100%;
}
</style>
</head>
<body>
<h1>页面3</h1>
<button onclick="goPage1()">后退到底</button>
<button onclick="goPage(25)">进度25%</button>
<button onclick="goPage(50)">进度50%</button>
<button onclick="goPage(75)">进度75%</button>
<button onclick="goPage(100)">进度100%</button>
<div>
<progress value="0" max="100"></progress>
</div>
<script>
function goPage1(){
history.go(-2)
// 前进或者后退指定的步数
}
function goPage(value){
document.querySelector('progress').value = value
history.pushState(value,'进度'+ value,'#' + value)
// history.pushState() 方法向浏览器历史添加一个状态。
document.title = '进度' + value
}
// 注入的历史记录变化时可以获得事件通知
window.onpopstate = function(e){
var value = e.state
console.log(e.state)
if(value == null) value = 0
// if后面有一条语句时（条件成立时执行一条语句）可以不写大括号
document.querySelector('progress').value = value
document.title = '进度' + value
}
</script>
</body>
</html>

JavaScript window对象

暂无评论

发送评论编辑评论

Markdown

悄悄话

邮件提醒

|´・ω・)ノ

ヾ(≧∇≦*)ゝ

(☆ω☆)

（╯‵□′）╯︵┴─┴

￣﹃￣

(/ω＼)

∠( ᐛ 」∠)＿

(๑•̀ㅁ•́ฅ)

→_→

୧(๑•̀⌄•́๑)૭

٩(ˊᗜˋ*)و

(ノ°ο°)ノ

(´இ皿இ｀)

⌇●﹏●⌇

(ฅ´ω`ฅ)

(╯°A°)╯︵○○○

φ(￣∇￣o)

ヾ(´･･｀｡)ノ"

( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃

(ó﹏ò｡)

Σ(っ °Д °;)っ

( ,,´･ω･)ﾉ"(´っω･｀｡)

╮(╯▽╰)╭

o(*////▽////*)q

＞﹏＜

( ๑´•ω•) "(ㆆᴗㆆ)

颜文字

Emoji

小恐龙

花!