HTML5 History对象,Javascript修改地址栏而不刷新页面(二)
一、实例说明:
$('#btnOne').click(function () {
var stateObject = { id: 1 };
var title = "本地首页";
var newUrl = '/index.html';
//修改地址栏中的地址
/*
* 使用说明,pushState中缓存的地址,必须是当前域中的地址
*/
history.pushState(stateObject, title, newUrl);
});
$('#btnTwo').click(function () {
//获取操作历史记录
console.info(history.length);
});
window.addEventListener('popstate', function (event) {
console.info(event);
console.info(event.state);
/*
* event.state.id 获取说明,第一次打开页面没有id,会抛出异常
*/
console.info(event.state.id);
});
测试结果:IE10及以上浏览器支持,Google,FF支持
HTML5 History 一:http://www.cnblogs.com/tianma3798/p/5584541.html
HTML5 History对象,Javascript修改地址栏而不刷新页面(二)的更多相关文章
- HTML5 History对象,Javascript修改地址栏而不刷新页面
一.History对象 History 对象包含用户(在浏览器窗口中)访问过的 URL. History 对象是 window 对象的一部分,可通过 window.history 属性对其进行访问. ...
- HTML5 修改浏览器url而不刷新页面
嘛,起因是黑子大叔在微博上的一条@信息,找起了这个的实现,看了一圈google的中文信息内似乎还没有怎么提到这个的内容,就发表上来. 详细效果就是类似于用Firefox4+/Chrome 5+/Saf ...
- mui 从列表进入到详情,再返回,列表页还是进入列表之前的样子,而不刷新页面
mui 从列表进入到详情,再返回,列表页还是进入列表之前的样子,而不刷新页面
- PHP + JavaScript + Ajax 实现无刷新页面加载效果
数据源工厂 Json生成方式1 Json生成方式2 数据搬运工 数据加工师 转换类型 加工展示 结果展示 初始页面 点击按钮之后 总结 今天这个实验的思路就是实现一个无刷新的页面加载效果.具体的思路是 ...
- javascript修改div大小遮挡页面渲染问题
页面中引入了其他js文件,浏览器窗口改变,页面没有跟随渲染问题.最后找到原因是因为这个js方法少了最后一行: "right": RightBox_w. window.onresiz ...
- Html5使用history对象history.pushState()和history.replaceState()方法添加和修改浏览历史记录
根据网上参考自己做个笔记:参考网址:http://javascript.ruanyifeng.com/bom/history.html history.pushState() HTML5为histor ...
- 林大妈的JavaScript进阶知识(三):HTML5 History API
HTML5中新增了History API,它用于管理浏览器路由跳转的一个url栈.History是window对象的一部分,它也是一个对象,因此称它是BOM(类似DOM,Browser Object ...
- BOM之history对象
前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...
- BOM之history对象(转)
前面的话 history对象保存着用户上网的历史记录,从窗口被打开的那一刻算起.由于安全方面的考虑,开发人员无法得到用户浏览器的URL,但借由用户访问过的页面列表,可以在不知道实际URL的情况下实现后 ...
随机推荐
- Ext.Ajax.request同步请求
导读: ajax分为2种,一种是同步,一种是异步同步:代码执行完了之后才执行后面的代码 异步:代码刚执行,后面的代码就马上接着执行了,不管前面的代码是否执行完异步的情况下,要获得返回信息,就需要在异步 ...
- linux里的php使用phpize拓展各种功能(curl,zip,gd等等)
这里的实验以拓展zip功能为实例,成功使用zip功能需要如下步骤: 1.下载zip拓展包,并解压,并进入zip文件夹 tar -zxvf zip.tar.gz // 解压 cd zip //进入文件夹 ...
- keil教程
KEIL C51标准C编译器为8051微控制器的软件开发提供了C语言环境,但是界面是英文的好多初学者看很多教程都是一头雾水,这个相对简单的教程.KEIL C51编译器的功能不断增强,使你可以更加贴近C ...
- WPF 界面布局DockPanel stackPanel WrapPanel 元素内容以及位置控制
1 DockPanel 1) 默认充满整个窗口. 2) 最后一个出现的部分,默认充满剩余空间. 3) 非最后一个出现的部分,根据其中内容,进行分配空间s 2 StackPanel 实现居左,居右,居中 ...
- 使用 ext3grep 恢复数据试验成功 笔记
使用 ext3grep 恢复数据试验成功 笔记 来源: Linux论坛 日期: 2009.07.07 10:03 (共有条评论) 我要评论 [Copy to clipboard] [ - ...
- HDU 1150 Machine Schedule
题目大意: 有两台机器A和B以及K个需要运行的任务.A机器有N种不同的模式,B机器有M种不同的模式,而每个任务都恰好在一台机器上运行. 如果它在机器A上运行,则机器A需要设置为模式xi,如果它在机器B ...
- 贪心(哈夫曼树):HDU 5884 sort
aaarticlea/png;base64,iVBORw0KGgoAAAANSUhEUgAAA2QAAAKACAIAAAB8KCy/AAAgAElEQVR4nOy9a5Adx3UmWL+kHxuekU ...
- ubuntu 安装配置JDK
总的原则:将压缩包解压至/usr/lib/jdk,设置jdk环境变量并将其修改为系统默认的jdk 1.将jdk-7u5-linux-x64.tar.gz拷贝到/usr/lib/jdk/目录下面,这里如 ...
- 自己生成非官方iPhone toolchain的头文件
如果你已经搭建好非官方iPhone toolchain开发包,如果缺少某些头文件,可以用以下方法自己生成. 首先下载class-dump: http://www.codethecode.com/pro ...
- nginx安装lua-nginx-module模块
转载注明地址:http://www.cnblogs.com/dongxiao-yang/p/5312285.html 本文主要采用手动源码安装的方式将lua-nginx模块编译到nginx源码内部 一 ...