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

 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() / 

 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 ) / 

 /body 

 /html 

JavaScript通过改变location对象的hash属性实现相同页面显示不同详情内容的效果 JavaScript通过改变location对象的hash属性的应用 前面我们学到了BOM的Location对象，现在来讲一下实际的应用。通过改变hash属性获取不同的数据。 1.列表页面代码： a href= 10模拟详情页面.html#0 target= _blank 张三 /a a href= 10模拟详情页面.html#1 target= _blank 李四 /a a href= 10模拟详情页面.html#2 target= _blank 王五 /a a href= 10模拟详情页面.html#3 target= _b
浏览器中BOM（浏览器对象模型）重点掌握对象之History对象的属性与方法 在学过JavaScript之后，我们都知道对象分为内置对象 、宿主对象 、自定义对象，我们经常用到的浏览器中的内置对象就是宿主对象的一种，浏览器的内置对象有很多，本文就来详细讲解一下History对象的属性与方法吧
浏览器中BOM（浏览器对象模型）重点掌握对象之Location对象的属性与方法 在学过JavaScript之后，我们都知道对象分为内置对象 、宿主对象 、自定义对象，我们经常用到的浏览器中的内置对象就是宿主对象的一种，浏览器的内置对象有很多，本文就来详细讲解一下Location对象的属性与方法吧。
浏览器环境 - window 对象 - 属性介绍 本文介绍 window 对象为数不多的几个属性值：origin、name、status 设备高宽像素比等。着重介绍 name 属性的由来、用处，尤其是其在跨域当中的作用。