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

最新推荐文章于 2022-09-28 11:08:45 发布

明金同学

最新推荐文章于 2022-09-28 11:08:45 发布

阅读量1.3w

点赞数 1

分类专栏： JavaScript交互式练习文章标签： javascript url jquery css js

本文链接：https://blog.csdn.net/weixin_44893902/article/details/109409866

版权

JavaScript交互式练习专栏收录该内容

32 篇文章 22 订阅

订阅专栏

查看本章节

查看作业目录

需求说明：

使用 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>