博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
web开发之浏览器(三)----浏览器常用事件及属性
阅读量:6837 次
发布时间:2019-06-26

本文共 2094 字,大约阅读时间需要 6 分钟。

hot3.png

浏览器页面后退事件

返回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

你可能感兴趣的文章
js 查找树节点 数组去重
查看>>
【翻译】对于Ext JS 5,你准备好了吗?
查看>>
android sqlite 增删改[insert、up…
查看>>
Eclipse常见问题集锦
查看>>
杭电 1711 Number Sequence 1686 2203
查看>>
石大ACM2587解题报告
查看>>
php 商场收银收费系统,使用的策略模式
查看>>
2016年宜昌楼市将迎来史上最激烈一战
查看>>
第一次团队冲刺4
查看>>
冒泡排序
查看>>
android studio 各种问题
查看>>
ios中一个开发者证书如何创建多个app应用
查看>>
创建和存储 cookie
查看>>
BZOJ2351[BeiJing2011]Matrix——二维hash
查看>>
Redis常用命令整理
查看>>
js的水仙花数的输出
查看>>
Codeforces Gym 100269 Dwarf Tower (最短路)
查看>>
mongo explain分析详解
查看>>
MySQL 行子查询
查看>>
Comparison Operators Modified by ANY, SOME, or ALL
查看>>