web开发之浏览器（三）----浏览器常用事件及属性

2019独角兽企业重金招聘Python工程师标准>>>

浏览器页面后退事件

<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 !!');
});

转载于:https://my.oschina.net/oospace/blog/360106