需求说明:
使用 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>