DOM中的window对象通过window.history方法提供了对浏览器历史记录的读取,让你可以在用户的访问记录中前进和后退。
picupload.php:
//处理上传,获得上传后的img_path地址,省略
$this->display('picupload.html', array('img_path' => $img_path));
picupload.html:
if(window.parent){
window.parent.addImgSuccess(img_path);
}
main.js:
var org_index = 0;
//"返回"触发事件,settimeout防止有些浏览器首次加载时触犯popstate
window.addEventListener('load', function() {
setTimeout(function() {
window.addEventListener('popstate', function() {
$('article').addClass('hid');
$('[node-type="basic_block"]').removeClass('hid');
});
}, 0);
});
$('[node-type="pic_a"]').tap(function(){
$('[node-type="basic_block"]').addClass('hid');
$('[node-type="upload_block"]').removeClass('hid');
var state = history.state;
history.pushState(state, null, window.location+'#upload');
org_index = history.length;
});
$('[node-type="pic_input"]').change(function(){ addPic(); });
//上传控件执行触发form提交
addPic : function() {
$("#pic_form").submit();
},
//上传头像成功
addImgSuccess : function(img_path, data) {
//兼容不同浏览器,一些浏览器加载window对象时会push新的state,history.length会增加
var go_index = org_index - history.length - 1;
history.go(go_index);
},
页面原型:
三,问题分析
1,iframe实现图片异步上传
原理:将图片上传的页面放在iframe中,这样就可以在iframe中将图片提交到服务器而不需要页面刷新,提交成功后用脚本实现回到主页面并显示上传的图片。
2,页面初次加载state对象各浏览器兼容问题
当页面加载时,它可能会有一个非空的state对象,这可能发生在当页面设置一个state对象(使用pushState或者replaceState)之后用户重启了浏览器。当页面重新加载,页面将收到onload事件,但不会有popstate事件。然而,如果你读取history.state属性,将在popstate事件发生后得到这个state对象,所以在"返回"触发事件,使用settimeout防止有些浏览器首次加载时触犯popstate
3,window内iframe使用state各浏览器兼容问题
不同浏览器对iframe中history操作不一样,如Firefox执行history.back/go(-1)是iframe内后退,而Chrome是父页面后退,我们这里是需要实现父页面回退,根据state变化动态获取需要回退的步数:
var go_index = org_index - history.length - 1;
history.go(go_index);
页可以根据不同的浏览器判断,不过需要对浏览器一一了解,不推荐,如下:
var explorer =navigator.userAgent;
var str = JSON.stringify(window.location);
//ie
if (explorer.indexOf("MSIE") >= 0) {
history.go(-1);
}
//firefox
else if (explorer.indexOf("Firefox") >= 0) {
history.go(-2);
}
//Chrome
else if (explorer.indexOf("Chrome") >= 0) {
}
//Opera
else if (explorer.indexOf("Opera") >= 0) {}
//Safari
else if (explorer.indexOf("Safari") >= 0) {}
//Netscape
else if (explorer.indexOf("Netscape")>= 0) {}