HTML5 新增的历史记录 API 可以实现无刷新更改地址栏链接,配合 AJAX 可以做到无刷新跳转。
SPA(single page application)-单页面应用有两个特点,一是路由控制,二是模板渲染。通过路由器,可以在不reload页面的情况下,实现页面部分刷新。那么,最关键的地方,就是如何设计路由器,如何让路由器工作?
版权声明:本文为吴孔云博客原创文章,转载请注明出处并带上链接,谢谢。 https://blog.csdn.net/wkyseo/article/details/51699770
随便打开我的电脑或者浏览器,然后同时按下Ctrl+H组合键,窗口的左侧就会弹出浏览过的历史记录的小窗口,选择相应的日期之后下拉菜单后,会有浏览的网页记录和我的电脑(下图),双击我的电脑,出现的就是这一天你的电脑上的被浏览过的文件夹或文件(前提是,浏览者,并没有删除历史记录,因为在此,选中目标,单击右键选择删除,同样也是可以将今天的浏览记录删除
起因是这样的,在尝试前后端分离的这条道路上,我自己也在不断摸索,感觉要把大部分的坑都踩踩了。目前我用的技术是:
NetShred X for mac版是一款Mac缓存清理工具,netshred x mac版主要用于删除浏览器缓存、Cookie、历史记录、电子邮件缓存等,轻松释放Mac磁盘空间。
浅谈移动端页面无刷新跳转问题的解决方案 2017-12-22 祈澈姑娘 最近开发微信公众号,用的框架是 一般的 UI,但是涉及到多页面之间的相互跳转的问题,降低了浏览器的性能,用户体验特别不好,卡顿,不流畅,因此不采用传统的页面跳转方式,看到不少手机网页开发的框架都都是在一个html文档中包涵多个页面的内容,每页放到不同的 里面。 于是采用当下流行的单页面模,在做pc网页的时候一般都直接给链接的。比起用链接来跳转页面,这样做也是有很多好处的(比如appjs,jquery Mobile) 这种web形式在如
一次性从服务器数据库中读取数据并传送到前端页面上是不现实的,一方面会加重服务器的压力,另一方面客户的带宽资源也会被占用。Ajax刚好可以解决数据异步加载的问题。Ajax 即“Asynchronous Javascript And XML”(异步 JavaScript 和 XML),是指一种创建交互式、快速动态网页应用的网页开发技术,无需重新加载整个网页的情况下,能够更新部分网页的技术。
这位网友在电脑上安装了火绒,原本只是用于保护重要数据。没想到,直接拦截了QQ的读取操作:
这个输入框就是插件的主要入口了,所有功能都从这里触发 使用mac的同学应该比较熟悉,参考了mac的聚焦搜索
使用JavaScript通过window.history对象来访问和操作浏览器的历史记录。window.history对象提供了一些方法和属性,跟踪浏览历史、导航到不同的页面以及对历史记录进行修改。
移动端开发在某些场景中有着特殊需求,如为了提高用户体验和加快响应速度,常常在部分工程采用SPA架构。传统的单页应用基于url的hash值进行路由,这种实现不存在兼容性问题,但是缺点也有--针对不支持onhashchange属性的IE6-7需要设置定时器不断检查hash值改变,性能上并不是很友好。 而如今,在移动端开发中HTML5规范给我们提供了一个History接口,使用该接口可以自由操纵历史记录。本文并不详细介绍History接口,而是探究History接口如何影响浏览器历史堆栈,并且利用这个规律应用到具
window.history 对象可以不用窗口window前缀编写。为了保护用户的隐私,有限制的JavaScript可以访问此对象。
路由:根据不同的url地址,显示不同的页面或者更新局部视图,呈现出来不同的内容。前端路由的实现方式分为服务端,Hash,History三种常见的路由实现方式。
浏览器在加载显示一个网页时,会对页面html代码解析,并在内存中创建一个描述该页面的模型(树形结构)。
当用户浏览网页时,可以使用JavaScript的BOM (Browser Object Model)中的History对象来访问浏览器的历史记录。这个对象允许您在不更改页面的情况下导航到不同的历史记录项,或者查看有关用户访问过的页面的信息。
第一点 :传统web应用遇到的2个问题 1.User Experience 用户体验 2.Performance 性能问题 SPA如何解决这些问题的: 不重新加载页面,交互尽可能使用一个web document对象。 用户体验变得更加的连续和流畅,同时网络延时带来的影响也很容易忽略。 第二点: 有一下技术方法可以用来,发送请求给服务器。 客户端技术 1.AJAX技术,采用jQuery ajax请求可以做跨浏览器兼容问题,未来的一个趋势。 2.Browser Plugins 向服务器异步发送请求 Silver
上一篇文章:Windows 10 下 C 盘清理的四个最好办法 | 安全简单,无需插件 | C 盘快满了,如何清理 C 盘?| win 10 OS盘清理[1]
自从 Google 发布 Google 浏览器 Chrome ,我就放弃了 Firefox 而投向了 Chrome。不过最近 Mozilla 基金会发布了 Firefox 3.5 RC 版(正式版将在 6 月底推出),又一次引起了我的眼光。
jQuery.mobile.changePage方法用的还是很多的。作为一个老手,有必要对jQuery mobile中实用方法做一些总结。系列文章请看jQuery Mobile专栏。jquery.mobile.changepage是过时的jQuery Mobile 1.4.0及将被删除在1.5.0。使用pagecontainer部件的change()法代替。 注意该方法是在内部使用的页面加载和转换作为一个结果,点击一个链接或提交表单时。跳转外部页面全部没有效果,必须是内部的DIV页面才有效果。 jQuery.mobile.changePage( to [, options ] )参数解释说明: to:字符串类型或Object类型,将要跳转到的目的页面。 options:可选参数,Object类型。其对象内的属性解释如下: allowSamePageTransition:布尔类型,默认为false。默认情况下,changepage()忽略请求改变当前的活动页面。设置为true,允许请求执行。注意的一些页面转换到另一个页面(changepage请求的页和页是不同的),他们可能不会如预期的动画。 changeHash:布尔类型,默认为true。设置为true时地址栏中的Hash更新会创建一个新的浏览器历史记录的影响。设置为false,传入的页面在浏览器历史替换当前页面,用户导航无法通过浏览器的“后退”按钮回到上一个页面。 data:Object类型或字符串类型,默认为 undefined。跳转页面发送ajax请求的参数。 dataUrl:字符串类型,默认为 undefined。完成页面转换时要更新浏览器地址的URL地址。如不特别指定,则使用页面page元素的data-url属性值。 pageContainer:(jQuery选择器,默认:$.mobile.pageContainer)指定应该包含页面的容器。 reloadPage:布尔类型,默认false。强制刷新页面, 即使当页面容器中的dom元素已经准备好时,也强制刷新。只在changePage()的to参数是一个可用地址的时候。 reverse:布尔类型,默认false。设定页面转场动画的方向,设置为true时将导致反方向的转场。 role:字符串类型,默认为 undefined。显示页面的时候使用data-role值。默认情况下此参数为认:undefined,取决于元素的@data-role属性。 showLoadMsg:布尔类型,默认true。设定加载外部页面时是否显示loading信息。 transition:字符串类型,默认为 $.mobile.defaultPageTransition。过渡到其他页面时呈现。 type:字符串类型,默认为get。只有到to的参数被指定时使用。 使用例子如下:添加changehash:假以避免iframe引起的问题。
SVGEdit 一款非常老牌的 SVG 图形编辑器,用于编辑处理 SVG,star 数目前是 5.8k。
序言 前端路由一直都是我们单页面模式开发的重要组成部分,平时开发中会遇到路由的两种模式hash和history,只知道history模式下刷新页面会 404,显示在页面上没有hash的#那么丑陋,那
表单重复提交是在多用户Web应用中最常见、带来很多麻烦的一个问题。有很多的应用场景都会遇到重复提交问题,比如:
history对象是window对象的一部分,也就是说可以window.history进行访问
11月20日早间,伴随着Chrome 87正式版上线,微软也发布了Edge 87稳定版。
思路: 用户每次浏览商品时, 向后台发送请求, 携带商品ID, 然后在 Redis中存储: 用户ID和浏览的商品ID,以时间排序. 来实现存储用户浏览历史记录. 其比较复杂的是redis选用数据结构(有序Set)
来源 | 扩展迷EXTFANS 11月20日早间,伴随着Chrome 87正式版上线,微软也发布了Edge 87稳定版。 Edge现在作为Chrome全球市场上的最大竞争对手,其市场份额仅次于谷歌。 据外媒报道,Edge 87稳定版的各项性能此次也拥有较大幅度的提升。 除了在使用中更加稳定外,同时微软也调整了软件的内存占用率,让系统更加流畅,同时也降低了那些配置不高的用户的负担。 据悉,Edge 87稳定版现在包含此前开发版中测试的功能:包括电商平台比价、查找优惠券、可固定的收藏夹、PDF文档注释、共享、复
History对象 History对象允许操作浏览器的曾经在标签页或者框架里访问的会话历史记录。 属性 history.length: 只读,返回一个整数,该整数表示会话历史中元素的数目,包括当前加载的页,例如在一个新的选项卡加载的一个页面中,这个属性返回1。 history.scrollRestoration: 允许Web应用程序在历史导航上显式地设置默认滚动恢复行为,此属性可以是自动的auto或者手动的manual。 history.state 只读,返回一个表示历史堆栈顶部的状态的值,这是一种可以不必
如何监听到 window.location 的变化呢?可以通过 window.onhashchange 去监听, 例如:
使用location对象可以通过很多方式来改变浏览器的位置,每次修改location的属性(hash除外),页面都会以新URL重新加载。
请想象你正在看一个视频下面的评论,在翻到十几页的时候,你发现一个写得稍长,但非常有趣的评论。正当你想要停下滚轮细看的时候,手残按到了F5。然后,页面刷新了,评论又回到了第一页,所以你又要重新翻一次。
长时间使用浏览器会积累大量浏览器历史记录,这些是很隐私的数据,里面甚至可能有一些不可描述的网站或者搜索记录不想让别人知道。不过,我们自己可能会感兴趣,天天都在上网,想知道长期下来是都在摸鱼还是有认真工作。
日前,火绒安全团队发现,万能压缩、起点PDF阅读器、迷你看图王、新速压缩、值购助手等一批软件内置后门程序,该后门可用来下发任意模块到用户电脑隐秘执行,威胁极大。目前,我们发现其云控下发的模块会投放间谍木马,用以收集用户浏览器历史记录等信息。此外,该木马还会利用QQ登录凭证窃取QQ身份信息。
Edge之前陆续推出了Edge Workspace、Edge垂直标签栏、Edge集锦等实用功能,可以看到Edge浏览器非常注重让用户能够有序处理自己30~50个打开的标签页,提高信息管理效率。
一个jQuery作者的写的关于定时器解释,记的顺手订阅一下。John Resig,jQuery之父
点开链接,会出现文章开头图片的的页面——游戏主页,「进入房间」后,左上角有个「离开房间」按钮,点击后,会返回主页。
SharpChromium SharpChromium是一个针对浏览器数据的.NET 4.0 CLR项目,在SharpChromium的帮助下,广大研究人员可以轻松提取浏览器中类似Cookie、浏览历史和存储凭证之类的数据。 值得一提的是,SharpChromium目前支持Google Chrome、Microsoft Edge以及Microsoft Edge Beta版本浏览器,并且能够提取下列类型的数据: Cookie(JSON格式); 历史记录,以及跟每一条历史记录相关的Cookie; 存储的用户凭证
BOM,即浏览器对象模型(Browser Object Model),是JavaScript与浏览器之间的接口,它允许JavaScript与浏览器进行交互,实现访问和控制浏览器窗口、文档和其他浏览器功能的功能。本文将详细介绍BOM的各个方面,包括窗口对象、定时器、历史记录、位置信息等,并提供示例代码来帮助您更好地理解和运用BOM。
JavaScript,弱类型脚本语言,增强交互和用户体验提高效率等。JavaScript=ECMAScript+JavaScript特有的内容(BOM对象+DOM对象) ECMAScript:与html结合:内部JS(script标签定义,在html文档内部,按位置先后执行),外部JS(script标签引入src元素), 注释:当行//,多行/**/,数据类型:原始数据类型(基本,number[整数,小数,NaN not a number],string,boolean,null,undefined),引用数据类型(对象) 变量,var定义,开辟空间不定义类型。赋值可改变类型。document.write输出,添加标签字符串换行。typeof(变量)关键字,打印数据类型(null是一个object的bug)。 运算符,一元运算符:++,--,+-(正号,负号[可以将其他类型转number,无法转换为NaN]),算数运算符:+-*/%,赋值运算符=,+=,-=,比较运算符:>,>=,<,<=,==,!=,类型不同则转换类型比较,===(不转换类型比较)。
大家都有过这种体验吧~经常不小心关闭了不该关闭的网页,却没有关闭应该关闭的网页。不小心关闭以后还得去历史记录从新翻出来,这个太麻烦啦。
BOM(Browser Object Model 即:浏览器对象模型),描述与浏览器进行交互的方法和接口。
一、BOM 1. 概述 * BOM:Browser Object Model 浏览器对象模型 2. 组成 ① Window:窗口对象 ② Navigator:浏览器对象 ③ Screen:显示器屏幕对象 ④ History:历史记录对象 ⑤ Location:地址栏对象 二、Window 1. 方法 alert():弹出警告框 prompt():弹出可输入对话框 confirm():弹出确认框 colse():关闭当前窗口 open(URL):打开新窗口 setTimeout("javaScript;",
@echo off color f2 echo Safe mode will prevent external DLLs from loading and start with an empty User Data. ping -n 3 127.0.0.1>nul rem "--cb-safemode-empty-user-data --flag-switches-begin --disable-direct-write --flag-switches-end" may be added start chr
在单页面应用中history路由是很受欢迎的,它的路由显示方式和传统的路由方式相同,在显示上很美观,比hash的方式看着舒服的多。我们经常使用的api比如push或pushState,replace或replaceState,go,forward,back等等,其实都是和html5内置的history对象息息相关的,其原理就是调用了HTML5的history内置对象,然后进行了一些封装操作。
领取专属 10元无门槛券
手把手带您无忧上云