使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具
查看本章节
查看作业目录
需求说明:
使用 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>
使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具的更多相关文章
- JavaScript -- 时光流逝(十):Screen 对象、History 对象、Location 对象
JavaScript -- 知识点回顾篇(十):Screen 对象.History 对象.Location 对象 1. Screen 对象 1.1 Screen 对象的属性 (1) availHeig ...
- javascript之BOM对象(二location对象)
一.location对象提供和当前加载的文档相关的信息还有一些导航功能.location对象是window对象的属性,同时也是document对象的属性.window.location和documen ...
- VB中的属性、方法和事件概念解析
Visual Basic 语言中的所有对象都有它们自己的属性.方法和事件,其中包括窗体和控件.可以将属性视为对象的特性,将方法视为对象的操作,而将事件视为对象的响应. 日常生活中的对象(如氦气球)也具 ...
- JS高级---拷贝继承:把一个对象中的属性或者方法直接复制到另一个对象中
拷贝继承:把一个对象中的属性或者方法直接复制到另一个对象中 浅拷贝 function Person() { } Person.prototype.age = 10; Person.prototype. ...
- 《前端之路》- TypeScript (四) class 中各类属性、方法,抽象类、多态
目录 一.TypeScript 中的类 二.TypeScript 中类的继承 三.TypeScript 中公共,私有与受保护的修饰符 3-1.属性的 public 3-2.属性的 private 3- ...
- mybatis生成的pojo 中的属性或方法不够我们当做dto使用时
我们在写代码的时候,如果一个 mybatis生成的pojo 中的属性或方法不够我们使用(当做dto和前台交互)时,我们有两种方法: 第一: 直接在 原 pojo 中增加属性或者方法 第二:我们可以再写 ...
- java中为什么接口中的属性和方法都默认为public?
4)为什么接口中的属性和方法都默认为public?Sun公司当初为什么要把java的接口设计发明成这样? [新手可忽略不影响继续学习]答:如上所述,马克-to-win:既然接口强于抽象类能胜任作为和外 ...
- History对象和location对象
history对象 History对象包含用户在浏览器窗口中访问过的url.不是所有浏览器都支持该对象. 属性length 返回浏览器历史列表中的URL数量. 方法:back() 加载histor ...
- JavaScript 基础(三) - Date对象,RegExp对象,Math对象,Window 对象,History 对象,Location 对象,DOM 节点
Date对象 创建Date对象 //方法1:不指定参数 var date_obj = new Date(); alert(date_obj.toLocaleString()) //方法2:参数为日期字 ...
随机推荐
- int是几位;short是几位;long是几位 负数怎么表示
其实可以直接通过stm32的仿真看到结果:(这里是我用keil进行的测试,不知道这种方法是否准确) 从上面看, char是8位 short是4*4=16位 int是8*4=32位 long是8* ...
- ES安装简记
JDK # java -versionjava version "1.8.0_231"Java(TM) SE Runtime Environment (build 1.8.0_23 ...
- Maven的聚合工程(多模块工程)
在开发2个以上模块的时候,每个模块都是一个 Maven Project.比如搜索平台,学习平台,考试平台.开发的时候可以自己管自己独立编译,测试,运行.但如果想要将他们整合起来,我们就需要一个聚合工程 ...
- jQuery选择器整理+知识总结
jQuery选择器 没有不会遗忘的知识,还是做个总结吧! 一.基本分类 jQuery选择器大致可以分为两类,基本选择器和过滤选择器,总体结构体系如下: 二.基本选择器 基本选择器又可以分为三种,分 ...
- C++STL标准库学习笔记(一)sort
前言: 近来在学习STL标准库,做一份笔记并整理好,方便自己梳理知识.以后查找,也方便他人学习,两全其美,快哉快哉! 这里我会以中国大学慕课上北京大学郭炜老师的<程序设计与算法(一)C语言程序设 ...
- shell脚本 监控网卡信息
一.简介 源码地址 日期:2018/6/22 介绍:显示实时输入输出流量 效果图: 二.使用 适用:centos6+ 语言:英文 注意:无 下载 wget https://raw.githubuser ...
- 【antd】表单-单页面多表单提交功能
需求:多个表单,我想一起校验一起提交,比如这里的上下两个部分为两个组件,两个form表单 功能点:1.所有报表需通过校验 2.通过校验后提交并带入所有参数 核心问题:form表单的validateFi ...
- set env export区别
set env export区别 set,env和export这三个命令都可以用来显示shell变量,区别[root@localhost root]# aaa=bbb[root@localhost r ...
- SpringMVC 入门、请求、响应
目录 SpringMVC 概述 SSM 简介 MVC 简介 SpringMVC 简介 入门案例 Spring 技术架构 SpringMVC 基础配置 常规配置 Controller 加载控制 静态资源 ...
- 批处理文件 .bat 并行Arcpy脚本提高效率的思路-提升版
目录 前言 Arcpy脚本 导入库 函数定义 循环实现 批处理(.bat)脚本 前言 我在之前的博客园博客里,阐述了如何编写Arcpy脚本,如何利用Windows bat批处理脚本同时打开多个cmd窗 ...