前端浏览器事件-Browser

admin 管理员组

文章数量: 887021

文章目录

• 一、Resize 事件
• • 1、Resize 回调
  • • 方案一：
    • 方案二
  • 2、禁用 Resize
• 二、浏览器类型
• 三、判断是否 H5 端
• 四、浏览器全屏
• • 1、进入全屏
  • 2、退出全屏
• 五、回退
• • 1、回退
  • 2、事件回调
• 六、浏览器参数
• • • 方案一
    • 方案二
    • 方案三
• 六、浏览器滚动条
• • 一、判读是否出现滚动条
  • 二、H5 Header 样式随滚动条高度变化
• 七、网页宽高
• • 1、宽高
  • 2、获取浏览器宽度和高度
  • 3、获取 Dom 控件的宽高
  • 4、设置 Dom 控件的宽高
• 九、枚举 HTML 标签属性

一、Resize 事件

1、Resize 回调

方案一：

window.onresize = function(){
	location.reload(false);		//当为true时重新获取数据加载页面 当为false时获取缓存并刷新页面
}	

方案二

window.addEventListener('resize', () => {
    ...
}, false)

2、禁用 Resize

window.onresize = function(e){
	if(e && e.preventDefault){
		e.preventDefault();			// 阻止默认事件
	}else{
		window.event.returnValue = false;
	}
	return false;
}

二、浏览器类型

function myBrowser(){
    var userAgent = navigator.userAgent;  
    if (userAgent.indexOf("Opera") > -1) {
        return "Opera"
    }; //判断是否Opera浏览器
    if (userAgent.indexOf("Firefox") > -1) {
        return "FF";
    } //判断是否Firefox浏览器
    if (userAgent.indexOf("Chrome") > -1){
  		return "Chrome";
 	}
    if (userAgent.indexOf("Safari") > -1) {
        return "Safari";
    } //判断是否Safari浏览器
    if (userAgent.indexOf("compatible") > -1 && userAgent.indexOf("MSIE") > -1 && !isOpera) {
        return "IE";
    }; //判断是否IE浏览器
}

三、判断是否 H5 端

navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i))

四、浏览器全屏

1、进入全屏

浏览器无法自启动以后立即触发 进入全屏

function requestFullScreen() {
    var de = document.documentElement;
    if (de.requestFullscreen) {
        de.requestFullscreen();
    } else if (de.mozRequestFullScreen) {
        de.mozRequestFullScreen();
    } else if (de.webkitRequestFullScreen) {
        de.webkitRequestFullScreen();
    }
}

2、退出全屏

手动（F11）打开的全屏只能手动（ESC）关闭
requestFullScreen 打开的全屏 才能用 exitFullscreen 关闭

function exitFullscreen() {
    var de = document;
    if (de.exitFullscreen) {
        de.exitFullscreen();
    } else if (de.mozCancelFullScreen) {
        de.mozCancelFullScreen();
    } else if (de.webkitCancelFullScreen) {
        de.webkitCancelFullScreen();
    }
}

五、回退

1、回退

window.history.go(-1);  // 返回上一页
window.history.back();  // 返回上一页

2、事件回调

location.onPopState(() => {
	...
});

六、浏览器参数

方案一

getQueryString: function (name) {		
	var reg = new RegExp("(^|&)"+name+"=([^&]*)(&|$)");
	var result = window.location.search.substr(1).match(reg);
	return result?decodeURIComponent(result[2]):null;
},	

方案二

getQueryString: function (name) {		
	var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)", "i");
	var r = window.location.search.substr(1).match(reg);
	if (r != null) return unescape(r[2]); return null;
},

方案三

function getQueryString() {
	var url = location.search; //获取url中"?"符后的字串
	var theRequest = new Object();
    if (url.indexOf("?") != -1) {
        var str = url.substr(1);
        strs = str.split("&");
        for(var i = 0; i < strs.length; i ++) {
            theRequest[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
        }
    }
	return theRequest;		
}	

六、浏览器滚动条

一、判读是否出现滚动条

if(document.body.style.overflow!="hidden" 
	&& document.body.scroll!="no"
	&& document.body.scrollHeight>document.body.offsetHeight){
	// 有滚动条
	...
}else{
	// 无滚动条
	...
}

二、H5 Header 样式随滚动条高度变化

document.addEventListener('scroll', (e) => {
  var scrollTop = 0
  if(document.documentElement&&document.documentElement.scrollTop) {
	scrollTop = document.documentElement.scrollTop;
  } else if(document.body) {
	scrollTop = document.body.scrollTop;
  }
  scrollTop = scrollTop > 90 ? 90 : scrollTop  // 90 为固定头部高度，项目种可动态获取
  this.opacity = scrollTop / 90
})

七、网页宽高

1、宽高

网页可见区域宽：document.body.clientWidth;
网页可见区域高：document.body.clientHeight;
网页可见区域宽：document.body.offsetWidth; 		// 包括边线和滚动条的宽
网页可见区域高：document.body.offsetHeight;		// 包括边线的宽
网页正文全文宽：document.body.scrollWidth;
网页正文全文高：document.body.scrollHeight;
网页被卷去的高(ff)：document.body.scrollTop;
网页被卷去的高(ie)：document.documentElement.scrollTop;
网页被卷去的左：document.body.scrollLeft;
网页正文部分上：window.screenTop;
网页正文部分左：window.screenLeft;
屏幕分辨率的高：window.screen.height;
屏幕分辨率的宽：window.screen.width;
屏幕可用工作区高度：window.screen.availHeight;
屏幕可用工作区宽度：window.screen.availWidth;
屏幕彩色位设置是: window.screen.colorDepth;
屏幕像素/英寸设置: window.screen.deviceXDPI; 

2、获取浏览器宽度和高度

domWidth = document.body.clientWidth || document.body.scrollWidth;
domHeight = document.body.clientHeight || document.body.scrollHeight;

3、获取 Dom 控件的宽高

document.getElementById('#viewID').offsetHeight;
document.getElementById('#viewID').offsetWidth;

4、设置 Dom 控件的宽高

document.getElementById('#viewID').style.height = "10px";
document.getElementById('#viewID').style.width = "10px";

九、枚举 HTML 标签属性

Object.keys(document.getElementByTagName('a')[0].__proto__)

本文标签： 浏览器 事件 Browser