查看本章节

查看作业目录

需求说明：

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

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

  1. JavaScript -- 时光流逝（十）：Screen 对象、History 对象、Location 对象

    JavaScript -- 知识点回顾篇(十):Screen 对象.History 对象.Location 对象 1. Screen 对象 1.1 Screen 对象的属性 (1) availHeig ...

  2. javascript之BOM对象(二location对象)

    一.location对象提供和当前加载的文档相关的信息还有一些导航功能.location对象是window对象的属性,同时也是document对象的属性.window.location和documen ...

  3. VB中的属性、方法和事件概念解析

    Visual Basic 语言中的所有对象都有它们自己的属性.方法和事件,其中包括窗体和控件.可以将属性视为对象的特性,将方法视为对象的操作,而将事件视为对象的响应. 日常生活中的对象(如氦气球)也具 ...

  4. JS高级---拷贝继承：把一个对象中的属性或者方法直接复制到另一个对象中

    拷贝继承:把一个对象中的属性或者方法直接复制到另一个对象中 浅拷贝 function Person() { } Person.prototype.age = 10; Person.prototype. ...

  5. 《前端之路》- TypeScript (四) class 中各类属性、方法，抽象类、多态

    目录 一.TypeScript 中的类 二.TypeScript 中类的继承 三.TypeScript 中公共,私有与受保护的修饰符 3-1.属性的 public 3-2.属性的 private 3- ...

  6. mybatis生成的pojo 中的属性或方法不够我们当做dto使用时

    我们在写代码的时候,如果一个 mybatis生成的pojo 中的属性或方法不够我们使用(当做dto和前台交互)时,我们有两种方法: 第一: 直接在 原 pojo 中增加属性或者方法 第二:我们可以再写 ...

  7. java中为什么接口中的属性和方法都默认为public？

    4)为什么接口中的属性和方法都默认为public?Sun公司当初为什么要把java的接口设计发明成这样? [新手可忽略不影响继续学习]答:如上所述,马克-to-win:既然接口强于抽象类能胜任作为和外 ...

  8. History对象和location对象

    history对象 History对象包含用户在浏览器窗口中访问过的url.不是所有浏览器都支持该对象. 属性length   返回浏览器历史列表中的URL数量. 方法:back() 加载histor ...

  9. JavaScript 基础(三) - Date对象，RegExp对象，Math对象，Window 对象，History 对象，Location 对象，DOM 节点

    Date对象 创建Date对象 //方法1:不指定参数 var date_obj = new Date(); alert(date_obj.toLocaleString()) //方法2:参数为日期字 ...

随机推荐

  1. redis安装与简单实用

    1.在Linux上redis的安装时十分简单的: 第一步:wget http://download.redis.io/releases/redis-2.8.12.tar.gz 解压: tar zxvf ...

  2. 【Linux】【Basis】块存储，文件存储，对象存储

    1. 块存储: 定义:这种接口通常以QEMU Driver或者Kernel Module的方式存在,这种接口需要实现Linux的Block Device的接口或者QEMU提供的Block Driver ...

  3. Linux基础命令---mysqldump数据库备份

    mysqldump mysqldump是一个客户端的备份程序,他可以备份数据库,或者将数据库传输到另外一个服务器. 此命令的适用范围:RedHat.RHEL.Ubuntu.CentOS.Fedora. ...

  4. SpringBoot java配置类@Configuration 的两种写法

    首先在Springboot项目中,件一个java类,使用注解@Configuration  ,则这个类是SpringBoot bean的创建的配置文件类,,这种配置文件类有两种写法 1.使用包扫描 , ...

  5. Redis 高并发解决方案

    针对大流量瞬间冲击,比如秒杀场景 redis前面可以加一层限流 sentinel / Hystrix redis高并发(读多写少)下缓存数据库双写误差: 1. 修改操作使用分布式锁(就是修改的时候加锁 ...

  6. springboot优雅实现异常处理

    前言 在平时的 API 开发过程中,总会遇到一些错误异常没有捕捉到的情况.那有的小伙伴可能会想,这还不简单么,我在 API 最外层加一个 try...catch 不就完事了. 哈哈哈,没错.这种方法简 ...

  7. 【C/C++】C++ warning： control reaches end of non-void function return

    控制到达非void函数的结尾. 一些本应带有返回值的函内数到容达结尾后可能并没有返回任何值. 这时候,最好检查一下是否每个控制流都会有返回值. 我是ostream声明的时候没有写return out; ...

  8. 强化学习实战 | 表格型Q-Learning玩井字棋（四）游戏时间

    在 强化学习实战 | 表格型Q-Learning玩井字棋(三)优化,优化 中,我们经过优化和训练,得到了一个还不错的Q表格,这一节我们将用pygame实现一个有人机对战,机机对战和作弊功能的井字棋游戏 ...

  9. Nginx日志分析脚本

    目录 一.简介 二.脚本 一.简介 运维工作是一个比较复杂的工作,有时候面对上万条的日志,如何作分析?难道一条条的分析? 这估计看两眼就要打哈欠了吧?聪明的人会选择脚本,这就是为什么现在提倡自动化运维 ...

  10. CF792A New Bus Route 题解

    Content 给定一个长度为 \(n\) 的数列 \(a_1,a_2,a_3,...,a_n\),求这个序列当中差的绝对值最小的数对并求出这样的数对的个数. 数据范围:\(2\leqslant n\ ...