首页 > 代码库 > web开发之浏览器（三）----浏览器常用事件及属性
web开发之浏览器（三）----浏览器常用事件及属性
浏览器页面后退事件
<a href="javascript:history.back(-1)" class="btn btn-default" >返回</a>
history.back(-1):直接返回当前页的上一页，数据全部消息，是个新页面
history.go(-1):也是返回当前页的上一页，不过表单里的数据全部还在
history.back(0) 刷新
history.back(1) 前进
history.back(-1) 后退
//希望最终停在B页，不想点B页浏览器返回按钮，返回到A页，则在A页加：
$(document).ready(function(){
window.history.forward(1);
}）
浏览器离开页面或关闭选项卡提示
window.onbeforeunload = function(){
return "Are you sure to leave?" ;//离开页面提示
}
或者
$(window).unload(function(){
alert("Goodbye!");
});
浏览器进入页面事件或者页面加载完毕事件
window.onload = function(){
}
或
$(function(){
})
注意：前者只能执行一次且必须等待页面的所有元素全部加载完毕（包括图片）才开始执行
后者可以执行多次，且只需要等待页面框架dom结构下载完毕后就开始执行
浏览器滚动条事件
$(window).scrollTop(); //得到滚动条距离顶部的距离。
//设置滚动条距离顶部或底部的距离，保持滚动条状态等
$(window).scroll( function() {
var screenheight = window.screen.availHeight; //获取屏幕高
$(window).scrollTop( document.body.clientHeight-120-screenheight);//保持滚动条距离底部120px
} );
浏览器网页宽度等属性
var s = ""; s += " 网页可见区域宽：" + document.body.clientWidth + "\n"; s += " 网页可见区域高：" + document.body.clientHeight + "\n"; s += " 网页可见区域宽：" + document.body.offsetWidth + " (包括边线和滚动条的宽)" + "\n"; s += " 网页可见区域高：" + document.body.offsetHeight + " (包括边线的宽)" + "\n"; s += " 网页正文全文宽：" + document.body.scrollWidth + "\n"; s += " 网页正文全文高：" + document.body.scrollHeight + "\n"; s += " 网页被卷去的高(ff)：" + document.body.scrollTop + "\n"; s += " 网页被卷去的高(ie)：" + document.documentElement.scrollTop + "\n"; s += " 网页被卷去的左：" + document.body.scrollLeft + "\n"; s += " 网页正文部分上：" + window.screenTop + "\n"; s += " 网页正文部分左：" + window.screenLeft + "\n"; s += " 屏幕分辨率的高：" + window.screen.height + "\n"; s += " 屏幕分辨率的宽：" + window.screen.width + "\n"; s += " 屏幕可用工作区高度：" + window.screen.availHeight + "\n"; s += " 屏幕可用工作区宽度：" + window.screen.availWidth + "\n"; s += " 你的屏幕设置是 " + window.screen.colorDepth + " 位彩色" + "\n"; s += " 你的屏幕设置 " + window.screen.deviceXDPI + " 像素/英寸" + "\n"; alert(s); 某元素距离顶部距离document.getElementById(id).offset().top 某元素距离左边距离document.getElementById(id).offset().left
浏览器调整窗口大小事件
window.onresize=function(){
}
或者
$(window).resize(function(){
alert(‘window is resized !!‘);
});
web开发之浏览器（三）----浏览器常用事件及属性
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。