使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具

查看本章节

查看作业目录

需求说明：

使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具

实现思路：

  1. 使用history对象中的 forward() 方法和 back() 方法实现前进和后退的功能
  2. 使用location对象中的 reload() 方法实现刷新功能
  3. 使用location对象中的 assign() 方法实现页面的加载功能
  4. 使用浏览器预览效果

实现代码：

<!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>

 

posted @ 2020-11-01 00:00  明金同学  阅读(32)  评论(0)  编辑  收藏  举报