查看本章节

查看作业目录

需求说明：

使用 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. Linux启动初始化配置文件

    Linux启动初始化配置文件(1)/etc/profile 登录时,会执行. 全局(公有)配置,不管是哪个用户,登录时都会读取该文件. (2)/ect/bashrc Ubuntu没有此文件,与之对应的 ...

  2. Linux学习 - 权限管理命令

    一.chmod(change the permissions mode of a file) 1 功能 改变文件或目录权限 root 与 所有者 可进行此操作 2 语法 chmod  [(ugoa) ...

  3. Linux:ps -ef命令

    ps命令将某个进程显示出来 grep命令是查找 中间的|是管道命令 是指ps命令与grep同时执行 PS是LINUX下最常用的也是非常强大的进程查看命令 检查java 进程是否存在:ps -ef |g ...

  4. CSS3新增特性\HTML标签类型

    RGBA:透明度      作用: 设置透明度(R G B A)   opacity:不透明度     文字也会被设置不透明度   圆角      border-radius:圆角{左上角,右上角.. ...

  5. springboot 设置项目路劲后不能访问首页

    环境背景 学习版本 : springboot2.31 controller  代码 @controller public class Iindex{ @RequestMapping("/&q ...

  6. Springboot,SSM及SSH的概念、优点、区别及缺点

    Springboot的概念: 是提供的全新框架,使用来简化Spring的初始搭建和开发过程,使用了特定的方式来进行配置,让开发人员不在需要定义样板化的配置.此框架不需要配置xml,依赖于像MAVEN这 ...

  7. 模板方法模式(Template Method Pattern)——复杂流程步骤的设计

    模式概述 在现实生活中,很多事情都包含几个实现步骤,例如请客吃饭,无论吃什么,一般都包含点单.吃东西.买单等几个步骤,通常情况下这几个步骤的次序是:点单 --> 吃东西 --> 买单. 在 ...

  8. Redis版本历史

    目录 Redis4.0 Redis3.2 Redis3.0 Redis2.8 Redis2.6 Redis4.0 可能出乎很多人的意料,Redis3.2之后的版本是4.0,而不是3.4.3.6.3.8 ...

  9. Wireshark（二）：应用Wireshark观察基本网络协议

    原文出处: EMC中文支持论坛 TCP: TCP/IP通过三次握手建立一个连接.这一过程中的三种报文是:SYN,SYN/ACK,ACK. 第一步是找到PC发送到网络服务器的第一个SYN报文,这标识了T ...

  10. 在对话框中设置前置任务（Project）

    <Project2016 企业项目管理实践>张会斌 董方好 编著 在[任务信息]中的[前置任务]选项卡中设置,这是最古板的法子. 至于[任务信息]这个对话框从哪里去找,这--这么久了,不会 ...