现代前端开发中最流行的页面模型,莫过于SPA单页应用架构。单页面应用指的是应用只有一个主页面,通过动态替换DOM内容并同步修改url地址,来模拟多页应用的效果,切换页面的功能直接由前台脚本来完成,而不是由后端渲染完毕后前端只负责显示。前端三驾马车Angular,Vue,React均基于此模型来运行的。SPA能够以模拟多页面应用的效果,归功于其前端路由机制。
History对象 History对象允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。 属性 history.length: 只读,返回一个整数,该整数表示会话历史中元素的数目,包括当前加载的页,例如在一个新的选项卡加载的一个页面中,这个属性返回1。 history.scrollRestoration: 允许Web应用程序在历史导航上显式地设置默认滚动恢复行为,此属性可以是自动的auto或者手动的manual。 history.state 只读,返回一个表示历史堆栈顶部的状态的值,这是一种可以不必
如何监听到 window.location 的变化呢?可以通过 window.onhashchange 去监听, 例如:
序言 前端路由一直都是我们单页面模式开发的重要组成部分,平时开发中会遇到路由的两种模式hash和history,只知道history模式下刷新页面会 404,显示在页面上没有hash的#那么丑陋,那
项目地址:https://github.com/biaochenxuying/route
使用location对象可以通过很多方式来改变浏览器的位置,每次修改location的属性(hash除外),页面都会以新URL重新加载。
ECMAScript是JavaScript的核心,但如果要在web中使用JavaScript,那么BOM则是真正的核心,BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。
起因是这样的,在尝试前后端分离的这条道路上,我自己也在不断摸索,感觉要把大部分的坑都踩踩了。目前我用的技术是:
早期的路由都是后端来实现的,根据用户访问的地址的不同,浏览器从服务器请求对应的资源或页面展示给用户。当页面数据量大,结构复杂的时候,随之造成服务器的压力也比较大,而且用户访问速度也比较慢。
BOM(Browser Object Model 即:浏览器对象模型),描述与浏览器进行交互的方法和接口。
HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接,配合 AJAX 可以做到无刷新跳转。
浅谈移动端页面无刷新跳转问题的解决方案 2017-12-22 祈澈姑娘 最近开发微信公众号,用的框架是 一般的 UI,但是涉及到多页面之间的相互跳转的问题,降低了浏览器的性能,用户体验特别不好,卡顿,不流畅,因此不采用传统的页面跳转方式,看到不少手机网页开发的框架都都是在一个html文档中包涵多个页面的内容,每页放到不同的 里面。 于是采用当下流行的单页面模,在做pc网页的时候一般都直接给链接的。比起用链接来跳转页面,这样做也是有很多好处的(比如appjs,jquery Mobile) 这种web形式在如
路由模块的本质就是建立起url和页面之间的映射关系。 hash和history改变URL的同时不会重新加载页面和发送请求。 背景知识 早期的前端路由通过location.hash实现,其可以获取到url中#号及其后面的参数 hash路由模式的实现基于以下几个特性 URL中的hash值只是客户端的一种状态,也就是说当向服务器发送请求时,hash部分不会被发送 hash值的改变都会在浏览器的访问历史中增加一个记录,因此我们可以通过浏览器的前进、回退按钮控制hash的切换 可以通过a标签中的href属性或者js
SPA(single page application)-单页面应用有两个特点,一是路由控制,二是模板渲染。通过路由器,可以在不reload页面的情况下,实现页面部分刷新。那么,最关键的地方,就是如何设计路由器,如何让路由器工作?
Chrome浏览器对于我们现在互联网行业已经不可或缺,其实大部分使用Chrome浏览器的人更看重的是它的强大的插件功能,几乎提供的插件无所不能。
在js跨域双向数据传递时可以用iframe加上location.hash来实现,在研究这个的时候深入学习了一下hash的特性。 hash就是uri中#及后面的部分,例如:www.google.com.hk#123的#123。当只有hash部分发生变化时,浏览器的历史记录会产生记录,但不会向服务器发出请求,这时按后退键地址栏的uri会变化但页面内容不变。 而hash变化但不发出请求就是js跨域双向数据传递的基础啦。 下面就讲述一下hash结合ajax的使用,ajax每次取数据时页面更新后浏览器并
现在mvvm框架已经火的不成样了,React、Angular和Vue.js的发布让前端工程化成为主流,大前端时代已经到来了,最近接触了vue的前端路由,闲来无事就开始琢磨源码,下面来说说前端路由的原理。
我们在工作中常常遇到需要用ajax来显示下一页和上一页,ajax可以不刷新页面进行操作!但是,假如你想通过浏览器的历史记录返回上一页和下一页。那么ajax默认是做不到的!一般需求要历史返回的时候,我们通常不使用ajax。但是呢,假如一个页面中,只有一个地方是需要动态的上一页下一页,其他地方都是固定的,那么这种情况除了使用模板之外,我们使用ajax来操作显得格外方便!那么如何解决ajax历史记录的返回和前进呢?今天我们就一起来学习一下!
版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/details/55255056
使用JavaScript通过window.history对象来访问和操作浏览器的历史记录。window.history对象提供了一些方法和属性,跟踪浏览历史、导航到不同的页面以及对历史记录进行修改。
history 库 a. 网址: github.com/ReactTraini… b. 管理浏览器会话历史(history)的工具库 c. 包装的是原生 BOM 中 window.history 和 window.location.hash
移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构。传统的单页应用基于url的hash值进行路由,这种实现不存在兼容性问题,但是缺点也有--针对不支持onhashchange属性的IE6-7需要设置定时器不断检查hash值改变,性能上并不是很友好。 而如今,在移动端开发中HTML5规范给我们提供了一个History接口,使用该接口可以自由操纵历史记录。本文并不详细介绍History接口,而是探究History接口如何影响浏览器历史堆栈,并且利用这个规律应用到具
window.history 对象可以不用窗口window前缀编写。为了保护用户的隐私,有限制的JavaScript可以访问此对象。
当用户浏览网页时,可以使用JavaScript的BOM (Browser Object Model)中的History对象来访问浏览器的历史记录。这个对象允许您在不更改页面的情况下导航到不同的历史记录项,或者查看有关用户访问过的页面的信息。
一次性从服务器数据库中读取数据并传送到前端页面上是不现实的,一方面会加重服务器的压力,另一方面客户的带宽资源也会被占用。Ajax刚好可以解决数据异步加载的问题。Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
本文介绍了页面跳转的三种方式:HTML/JS/PHP,并给出了具体的例子。对于HTML方式,直接在HEAD中添加<meta>标签即可;对于JS控制跳转方式,使用了setTimeout函数;对于PHP脚本控制跳转方式,使用了header函数。需要注意的是,JS控制跳转方式中,如果跳转页面需要刷新当前页面,可以使用window.location.href进行跳转,而PHP脚本控制跳转方式中,如果跳转页面也需要刷新当前页面,可以使用header函数进行跳转。
最近做了一个后台管理系统主体框架是基于React进行开发的,因此系统的路由管理,选用了react-router(4.3.1)插件进行路由页面的管理配置。 实现原理剖析
随便打开我的电脑或者浏览器,然后同时按下Ctrl+H组合键,窗口的左侧就会弹出浏览过的历史记录的小窗口,选择相应的日期之后下拉菜单后,会有浏览的网页记录和我的电脑(下图),双击我的电脑,出现的就是这一天你的电脑上的被浏览过的文件夹或文件(前提是,浏览者,并没有删除历史记录,因为在此,选中目标,单击右键选择删除,同样也是可以将今天的浏览记录删除
环境:vue.js+vant 问题:首页列表和分类页的列表用的同一个页面,页面区分用的是本地缓存,希望在分类页点击返回的时候,执行清除缓存,刷新页面 解决原理:利用history和浏览器刷新popstate状态去实现 每一次返回都会去历史记录回退 -1 所以就在进入页面之前 往历史记录里面多记录一次当前页面的链接。然后再回退的时候监听刷新,去做一些事情。 具体执行: 1、挂载完成后,判断浏览器是否支持popstate
长时间使用浏览器会积累大量浏览器历史记录,这些是很隐私的数据,里面甚至可能有一些不可描述的网站或者搜索记录不想让别人知道。不过,我们自己可能会感兴趣,天天都在上网,想知道长期下来是都在摸鱼还是有认真工作。
日前,火绒安全团队发现,万能压缩、起点PDF阅读器、迷你看图王、新速压缩、值购助手等一批软件内置后门程序,该后门可用来下发任意模块到用户电脑隐秘执行,威胁极大。目前,我们发现其云控下发的模块会投放间谍木马,用以收集用户浏览器历史记录等信息。此外,该木马还会利用QQ登录凭证窃取QQ身份信息。
Edge之前陆续推出了Edge Workspace、Edge垂直标签栏、Edge集锦等实用功能,可以看到Edge浏览器非常注重让用户能够有序处理自己30~50个打开的标签页,提高信息管理效率。
点开链接,会出现文章开头图片的的页面——游戏主页,「进入房间」后,左上角有个「离开房间」按钮,点击后,会返回主页。
SharpChromium SharpChromium是一个针对浏览器数据的.NET 4.0 CLR项目,在SharpChromium的帮助下,广大研究人员可以轻松提取浏览器中类似Cookie、浏览历史和存储凭证之类的数据。 值得一提的是,SharpChromium目前支持Google Chrome、Microsoft Edge以及Microsoft Edge Beta版本浏览器,并且能够提取下列类型的数据: Cookie(JSON格式); 历史记录,以及跟每一条历史记录相关的Cookie; 存储的用户凭证
在我们之前写的页面当中,用我们的惯用思维去思考的话,可能会需要写很多的页面,例如做一个 tab 栏,我们可能会想每个选项都要对应一个 HTML 文件,这样会很麻烦,甚至不友好,我们把这种称为 MPA 也叫多页面应用。
鹅妹子嘤!斯坦福用ChatGPT打造的「AI小镇」,可以在自己的电脑上跑了,还是能定制的那种!
BOM,即浏览器对象模型(Browser Object Model),是JavaScript与浏览器之间的接口,它允许JavaScript与浏览器进行交互,实现访问和控制浏览器窗口、文档和其他浏览器功能的功能。本文将详细介绍BOM的各个方面,包括窗口对象、定时器、历史记录、位置信息等,并提供示例代码来帮助您更好地理解和运用BOM。
作者:汪娇娇 时间:2017年11月18日 BOM提供了很多对象,用于访问浏览器的功能,这些功能与任何网页内容无关。 一、window 对象 BOM的核心对象是window,它表示浏览器的一个实例。在浏览器中,window对象有双重角色,它既是通过JavaScript访问浏览器窗口的一个接口,又是ECMAScript规定的Global对象。 1、全局作用域 全局作用域中声明的变量、函数都会变成window对象的属性和方法。 定义全局变量与在window对象对象上直接定义属性的差别:全局变量不能通过delet
大家都有过这种体验吧~经常不小心关闭了不该关闭的网页,却没有关闭应该关闭的网页。不小心关闭以后还得去历史记录从新翻出来,这个太麻烦啦。
目前单页应用(SPA)越来越成为前端主流,单页应用一大特点就是使用前端路由,由前端来直接控制路由跳转逻辑,而不再由后端人员控制,这给了前端更多的自由。
最近 B 站出了一个年度报告,统计用户一年当中在 B 站上观看视频的总时长和总个数。过去一年我居然在 B 站上看了2600+个视频,总计251个小时,居然花了这么多时间,吓得我差点把 Bilibili App 卸载了...
NetShred X for mac版是一款Mac缓存清理工具,netshred x mac版主要用于删除浏览器缓存、Cookie、历史记录、电子邮件缓存等,轻松释放Mac磁盘空间。
随着前端应用的业务功能越来越复杂、用户对于使用体验的要求越来越高,单页应用(SPA)成为前端应用的主流形式。大型单页应用最显著特点之一就是采用前端路由系统,通过改变URL,在不重新请求页面的情况下,更新页面视图。
一、BOM 1. 概述 * BOM:Browser Object Model 浏览器对象模型 2. 组成 ① Window:窗口对象 ② Navigator:浏览器对象 ③ Screen:显示器屏幕对象 ④ History:历史记录对象 ⑤ Location:地址栏对象 二、Window 1. 方法 alert():弹出警告框 prompt():弹出可输入对话框 confirm():弹出确认框 colse():关闭当前窗口 open(URL):打开新窗口 setTimeout("javaScript;",
路由:根据不同的url地址,显示不同的页面或者更新局部视图,呈现出来不同的内容。前端路由的实现方式分为服务端,Hash,History三种常见的路由实现方式。
领取专属 10元无门槛券
手把手带您无忧上云