html5在线api,HTML5 历史记录API
HTML5 历史记录API
HTML5历史记录API的使用方法,在线实例演示HTML5历史记录API如何使用、浏览器的兼容性、语法定义及它的属性值详细资料等。
HTML5历史记录API使您可以通过JavaScript访问浏览器导航历史记录。HTML5历史记录API在单页Web应用程序中非常有用。单页Web应用程序可以使用HTML5历史记录API来使应用程序中的某个状态"可标记"。稍后,我将回到如何使用历史记录API在单页应用程序中建立可标记状态。
历史堆栈
浏览历史由一堆URL组成。每次用户在同一个网站中浏览时,新页面的URL都会放在堆栈的顶部。当用户单击"后退"按钮时,堆栈中的指针将移动到堆栈中的上一个元素。如果用户再次单击"前进"按钮,则指针将向前移到堆栈上的最顶层元素。如果用户单击"后退",然后单击新链接,则堆栈中最顶层的元素将被新的URL覆盖。
这是历史记录堆栈的示例:http://myapp.com/great-new-story.html
http://myapp.com/news.html
http://myapp.com
在上述历史记录堆栈中访问的最后一页是http://myapp.com/great-new-story.html。如果用户单击"后退"按钮,则历史记录堆栈中的指针将移回 http://myapp.com/news.html。如果用户单击"前进"按钮,则历史记录堆栈指针将向前移动http://myapp.com/great-new-story.html,但是如果用户单击另一个链接(在http://myapp.com/news.html页面上),则该链接的URL将http://myapp.com/news.html在历史记录堆栈中覆盖 。
HTML5历史记录API使Web应用程序可以访问该历史记录堆栈。
HTML5历史记录API安全限制
HTML5历史记录API仅允许网页访问部分浏览历史记录,该部分与网页本身位于同一域中。出于安全原因,历史记录API中的此限制是必需的,因此网页无法查看用户访问过哪些其他网站。
同样,HTML5历史记录API不允许网页将URL推入历史记录堆栈中,该URL与网页的域不在同一域中。该限制确保了当用户开始输入网页时,网页不能假装已将用户转发到例如Paypal并嗅探其用户名/密码等。
历史对象
您可以通过history对象访问浏览历史记录,该对象在JavaScript中可以作为全局对象使用(实际上是window.history)。
该history对象包含以下功能-包括历史记录API:back()
forward()
go(index)
pushState(stateObject, title, url)
replaceState(stateObject, title, url)
该back()功能将浏览历史记录移回到上一个URL。调用back() 具有与用户单击浏览器的"后退"按钮相同的效果。
该forward()功能将浏览历史记录向前移动到历史记录的下一页。调用forward()与单击浏览器的"转发"按钮具有相同的效果。仅back()在调用该函数或单击"后退"按钮时才可能。如果历史记录已经指向浏览历史记录中的最新URL,则没有任何前进的方向。
该go(index)函数可以根据您作为参数传递给该go()函数的索引来向后或向前移动历史记录。如果您go()使用负索引进行调用(例如go(-1)),则浏览器将返回历史记录。如果您向go() 函数传递一个正索引,那么浏览器将在浏览历史记录中向前移动(例如go(1))。索引指示历史记录中要在浏览历史记录中前进或后退的步骤,例如1,2,-1,-2等。
该pushState(stateObject, title, url)函数将新的URL推送到历史记录堆栈。该函数具有三个参数。该url是推到历史堆栈的URL。该title 参数通常被浏览器忽略。的stateObject是,当一个新的URL被压入历史堆栈,将随着事件传递的对象解雇。它stateObject可以包含您想要的任何数据。它只是一个JavaScript对象。
该replaceState(stateObject, title, url)函数的功能类似于该pushState()函数,只是它将历史记录堆栈中的当前元素替换为新的URL。当前元素不一定是最重要的元素。这是目前所指向的元件,其可以是在堆栈中的任何元件,如果 back(),forward()和go()功能已经被称为上history 对象。
历史API示例
现在该来看一些有关如何使用HTML5历史记录API的示例。
back()和forward()
首先让我们看看如何使用back()和 forward()函数在历史记录中来回移动:history.back();
history.forward();
请记住,history对象位于window对象中,因此您还可以编写:window.history.back();
window.history.forward();
但是,由于该window对象是默认对象,因此可以将其省略。window在本教程的其余部分中,我将忽略该 对象。
请记住,除非您(或用户)首先移回历史记录,否则您无法移入历史记录。
go()
现在让我们看看如何使用该go()函数执行类似于back()和 forward()函数的动作。首先,这是您用来go()向后浏览历史记录的上一步:history.go(-1);
要向后移动两步,您可以将-2参数作为参数传递给go()函数,如下所示:history.go(-2);
同样,要使历史向前发展,您可以向go()函数传递正索引。这是两个在历史上向前推进了一步和两个步骤的示例:history.go(1);
history.go(2);
当然,如果您同时执行了这两行,则浏览历史记录将总共向前移动3个步骤。
pushState()
要将状态推入历史记录堆栈,请调用 对象的pushState()函数history。这是一个pushState()示例:var state = {};
var title = "";
var url = "next-page.html";
history.pushState(state, title, url);
本示例将新URL推送到历史记录堆栈中。这还将更改浏览器的地址字段中的URL,但不会导致浏览器尝试加载该URL。
replaceState()
该replaceState()函数替换了当前指向的历史记录堆栈中的history元素。如果用户已使用"后退"按钮将其移回历史记录,则这可能不是最重要的元素。这是一个replaceState()示例:var state = {};
var title = "";
var url = "another-page.html";
history.replaceState(state, title, url);
替换状态也将更改浏览器的地址字段中的URL,但不会使浏览器加载该URL。替换URL的页面仍保留在浏览器中。
浏览历史记录更改
HTML5历史记录API使网页能够侦听浏览器历史记录中的更改。安全限制也适用于此,因此不会向网页通知导致URL超出网页域之外的历史记录更改。
要侦听浏览器历史记录中的更改,请onpopstate在window 对象上设置侦听器。这是浏览器历史记录事件侦听器示例:window.onpopstate = function(event){
console.log("历史记录更改为:" + document.location.href);
}
该onpopstate事件处理函数将被调用每次在同一页内的浏览器历史记录更改(浏览器的历史,页面推送到历史堆栈)。对历史更改事件的反应可能是从URL提取参数并将相应的内容加载到页面中(例如,通过AJAX)。
注意:只有改变而导致的任何"返回"或"前进"按钮,或相应的历史导航功能 back(),forward()并且go()将导致onpopstate事件侦听器被调用。调用pushState()和replaceState()函数将不会触发历史记录更改事件。
在实践中使用History API
当将新的URL推入历史记录堆栈时,浏览器的地址字段中的URL将更改为新的URL。但是,浏览器不会尝试加载该URL。仅显示URL并将其推入堆栈,就像浏览器已访问该页面一样,但是推送新状态的页面仍保留在浏览器中。
将新URL推送到历史记录堆栈是一种使单页应用程序(SPA)中的特定状态可添加书签的有用方法。例如,在单页在线商店中,应用程序的URL可能是:http://myshop.com
该应用程序可能能够在同一页面中向用户显示产品,但是用户如何将指向特定产品的链接发送给朋友?
解决方案是,当加载新产品时,单页面应用将新URL推送到历史记录堆栈中。这不会导致新URL的加载,但确实会使新URL在浏览器的地址字段中可见。从这里可以将其添加为书签或复制粘贴到电子邮件等中。以下是这种可添加书签的URL外观的示例:http://myshop.com?productId=234
或者,也许是一个更具可读性的URL:http://myshop.com/products/234
或者是一个略多于REST的版本(也提到了产品类型):http://myshop.com/products/books/234
在将该URL推送到浏览历史记录之后,Web商店页面将通过AJAX加载相应的产品并将其显示给用户。
如果用户单击"后退"按钮,onpopstate则将调用事件处理程序。然后,网页应查看新的URL是什么,如果URL返回,则加载与该URL对应的产品或应用程序的首页http://myshop.com。
这是一个HTML5代码示例,说明了使用AJAX将数据加载到浏览器中的原理:
Book 123
App 456
function loadUrl(url) {
console.log("loading data from url: " + url);
}
function push(url) {
history.pushState(null, null, url);
loadUrl(url);
}
window.onpopstate = function(event) {
console.log("history changed to: " + document.location.href);
loadUrl(document.location.href);
}
本示例包含两个具有JavaScript Click侦听器的链接。单击链接之一后,相应的URL将被推入历史记录堆栈,然后加载到浏览器中。
该示例还包含一个onpopstate事件侦听器。当用户单击"后退"或"前进"按钮时,此事件侦听器将加载浏览器地址字段现在显示的任何URL。
配置服务器
如果用户单击链接和"后退" /"前进"按钮,则前面显示的示例将起作用。但是,如果用户将URL发送给朋友或将其添加为书签并稍后访问,该怎么办?
如果用户尝试访问加标签的URL,http://myshop.com/books/123则浏览器将向Web服务器请求该URL。Web服务器需要知道它必须发送回与从URL发送回的相同的单页应用程序http://myshop.com。您将需要配置Web服务器来执行此操作。
同样,单页Web应用程序必须查看首次加载时使用的URL,并使用该URL确定要加载和显示的内容。因此,如果单页应用程序已加载URL,则 myshop.com/books/123该应用程序应加载相应的产品并显示它。此URL检查必须在单页应用程序初始化期间进行。
浏览器对HTML5历史记录API的支持
在撰写本文时,除Opera Mini外,所有现代浏览器(IE,Safari,Chrome,Firefox)都支持HTML5历史记录API。
html5在线api,HTML5 历史记录API相关推荐
- html5 在线摄像头,HTML5在线摄像头使用
HTML5在线摄像头应用 最近在搞一个考试系统,系统要求要有随机拍照的功能,并且摄像头能够收到js的控制.在线摄像头嘛,就那两种实现的方式:cab或者flash. 暂且不论本人从没学过的flash(事 ...
- html5+在线录音,html5在线录音示例源码(MediaStream Recording API)
[实例简介]微信端 录音 可用 [实例截图] [核心代码] // fork getUserMedia for multiple browser versions, for the future // ...
- h5在线制作html5,在线制作HTML5多媒体作品的技巧
HTML5多媒体作品以其对各种平台的兼容而见长,目前已获得了广泛的应用.如果我们需要制作自己的HTML5多媒体作品,一个方便之选就是利用现成的在线制作工具"百度H5". 首先访问& ...
- html5在线裁剪,HTML5 本地裁剪图片并上传至服务器(老梗)
很多情况下用户上传的图片都需要经过裁剪,比如头像啊什么的.但以前实现这类需求都很复杂,往往需要先把图片上传到服务器,然后返回给用户,让用户确定裁剪坐标,发送给服务器,服务器裁剪完再返回给用户,来回需要 ...
- html5 在线签名,html5手写签名
sxqm 清 空 生成图片 var canvas, board; canvas = document.getElementById('myCanvas'); canvas.height = 300; ...
- html5 在线白板,Html5 canvas画图白板踩坑
最近接手了一个小型的H5,最主要的功能大概就是拍照上传和canvas画板了. 主要是记录一下自己菜到像傻子一样的技术. 1.canvas画板隔空打牛!画布越往上部分错位距离越小,越往下距离越大. 2. ...
- html5在线俄罗斯方块,HTML5最新经典俄罗斯方块游戏插件
这是一款最新的经典 HTML5 俄罗斯方块游戏插件.该插件使用html5和Blockrain.js来制作,它具有使用简单.响应式.可定制.速度快.有积分记录和自动游戏的特点. 基本使用方法 可以使用任 ...
- html5在线裁剪,HTML5 Canvas裁剪clip
裁剪(即clip())是渲染上下文中的绘制方法之一.很多人都以为这是一个清除概念,其实是错的.虽然从表现上看像清除,但是由于剪切区域由绘图路径设定,因此这是一个独立的显示区域. 在Canvas动画中, ...
- html5在线裁剪,html5 Canvas裁剪图片
drawImage(图片,图片中裁减的起始x坐标,图片中裁减的起始y坐标,裁减区域宽度,裁减区域高度,所画位置x坐标,所画位置y坐标,所画图形宽度,所画图形高度) 首先来看如下效果: 代码如下: va ...
- html5在线俄罗斯方块,Html5原创俄罗斯方块(基于canvas)
第一次写俄罗斯方块的时候已经是1年多前了,也是我刚刚学js不久. 为了加强对js的理解又加上对游戏的爱好,于是在没有参考他人的思路和代码下,自己用最基本的js代码写出了基于canvas的俄罗斯方块. ...
最新文章
- 红外测试操作步骤_红外传感实验操作步骤及数据分析(无测试实图)
- 为什要使用预编译SQL?(转)
- 如何查找订单提示VPRS VE217 数量/值确定时出错
- Apollo后台配置:删除项目
- 效率飞起!BML CodeLab发布重磅更新
- 如何用高德地图定位生成二维码_OSM地图本地发布如何生成各省市矢量地图
- 1.6 回归评估准确性的指标
- python中oserror_[python] 解决OSError: Address already in use
- oracle应付创建会计科目,求助: EBSR12应付发票取消后创建不成会计科目
- mysql binlog 查看pos点_查看MySQL日志数据binlog文件
- C和C++文本读写速度对比
- 半入耳式蓝牙耳机哪款音质好?音质最好的半入耳蓝牙耳机推荐
- indirect引用单元格/单元格区域/跨表引用(适用于引用不同工作表的相同单元格或者区域)
- c语言数组相同字符主元素,C语言数组考点归纳
- 红黑树如何快速调整到平衡态_快速多态
- 【GlobalMapper精品教程】040:tif转jpg:解决ArcGIS中JPEG压缩仅支持8位或16位无符号数据的问题
- Vue移动端项目(二)
- vbo,ibo,vao
- ubuntu server 14.04 编译安装xen4.4.2配置vtpm(二)——Dom0内核编译
- 微生物 Alpha多样性 作图 16S 菌群 R语言
热门文章
- centos7开启,关闭防火墙
- 《Linux总线、设备与驱动》USB设备发现机制
- mysql 过程和函数 变量的值_MySQL数据库提升篇-----存储过程和函数
- h5 调起相机_H5+js调用相机 - osc_e61ersei的个人空间 - OSCHINA - 中文开源技术交流社区...
- linux启动phpstudy,phpstudy启动不了解决方法
- win10网络不出现计算机列表,win10网络发现已关闭网络计算机和设备不可见怎么办?...
- android 下拉刷新 组件,android系统自带下拉刷新控件的实现
- android 关于页面,解析android中的帮助、about、关于作者、HELP等提示页面
- 头条抖音后端技术3面,centos卸载软件
- Android开发了解这些自然无惧面试,重难点整理