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

简介: 使用 history 对象和 location 对象中的属性和方法制作一个简易的网页浏览工具

需求说明:


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


49.png

实现思路:


  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>
相关文章
|
存储 缓存 网络协议
从输入URL到页面加载的全过程?隐藏元素有哪些方式,有什么区别?什么是内存泄漏?
1. 在浏览器地址栏输入url并回车 2. 浏览器查看是否有缓存,比较缓存是否过期,无缓存或过期则重新发起请求 3. DNS解析域名对应的IP 4. 根据IP建立TCP链接,即三次握手 5. 发送http请求 6. 服务器响应并返回结果 7. 关闭TCP链接,即四次挥手 8. 渲染页面,构建DOM树
|
JavaScript 前端开发
JavaScript通过改变location对象的hash属性实现相同页面显示不同详情内容的效果
JavaScript通过改变location对象的hash属性的应用 前面我们学到了BOM的Location对象,现在来讲一下实际的应用。通过改变hash属性获取不同的数据。 1.列表页面代码: &lt;a href=&quot;10模拟详情页面.html#0&quot; target=&quot;_blank&quot;&gt;张三&lt;/a&gt; &lt;a href=&quot;10模拟详情页面.html#1&quot; target=&quot;_blank&quot;&gt;李四&lt;/a&gt; &lt;a href=&quot;10模拟详情页面.html#2&quot; target=&quot;_blank&quot;&gt;王五&lt;/a&gt; &lt;a href=&quot;10模拟详情页面.html#3&quot; target=&quot;_b
HTML——input标记的典型应用(制作简单信息表单)
HTML——input标记的典型应用(制作简单信息表单)
169 0
HTML——input标记的典型应用(制作简单信息表单)
|
JavaScript 前端开发 Go
浏览器中BOM(浏览器对象模型)重点掌握对象之History对象的属性与方法
在学过JavaScript之后,我们都知道对象分为内置对象 、宿主对象 、自定义对象,我们经常用到的浏览器中的内置对象就是宿主对象的一种,浏览器的内置对象有很多,本文就来详细讲解一下History对象的属性与方法吧
326 0
浏览器中BOM(浏览器对象模型)重点掌握对象之History对象的属性与方法
|
JavaScript 前端开发
浏览器中BOM(浏览器对象模型)重点掌握对象之Location对象的属性与方法
在学过JavaScript之后,我们都知道对象分为内置对象 、宿主对象 、自定义对象,我们经常用到的浏览器中的内置对象就是宿主对象的一种,浏览器的内置对象有很多,本文就来详细讲解一下Location对象的属性与方法吧。
283 0
浏览器中BOM(浏览器对象模型)重点掌握对象之Location对象的属性与方法
|
JavaScript 前端开发 开发者
BOM(一)概述、history对象、location对象、navigator对象、事件
BOM(一)概述、history对象、location对象、navigator对象、事件
232 0
BOM(一)概述、history对象、location对象、navigator对象、事件
|
缓存 JavaScript 前端开发
vue项目中keep-alive的使用,从详情页返回列表时保存浏览位置
针对以上前三点,页面的缓存,我们需要用到vue的内置组件keep-alive,来缓存列表页面,同时配合路由选项来更改页面的数据。
10489 0

热门文章

最新文章