查看本章节
查看作业目录
需求说明：
使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
实现思路：
- 使用history对象中的 forward() 方法和 back() 方法实现前进和后退的功能
- 使用location对象中的 reload() 方法实现刷新功能
- 使用location对象中的 assign() 方法实现页面的加载功能
- 使用浏览器预览效果
实现代码：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<script type="text/javascript">
function go(){
var url=document.getElementById("txt").value;
window.location.assign(url);
}
function seturl(url){
document.getElementById("txt").value=url;
}
</script>
<p>
<a href="javascript:window.history.back()">后退</a>
<a href="javascript:window.history.forward()">前进</a>
<a href="javascript:window.location.reload()">刷新</a>
<input type="text" id="txt"/>
<input type="button" value="跳转" onClick="go()" />
</p>
<p>
<input type="button" value="百度" onClick="seturl('http://www.baidu.com')" />
<input type="button" value="新浪" onClick="seturl('http://www.sina.com')" />
<input type="button" value="网易" onClick="seturl('http://www.163.com')" />
<input type="button" value="淘宝" onClick="seturl('http://www.taobao.com')" />
<input type="button" value="京东" onClick="seturl('http://www.jd.com')" />
<input type="button" value="天猫" onClick="seturl('http://www.tmall.com')" />
</p>
</body>
</html>