JavaScript -- tips

本篇提要

• 进入与退出全屏
• 获取鼠标选中的文本
• 鼠标滚轮事件
• 检测浏览器
• 禁止网站内容被复制粘贴

进入与退出全屏

function FullScreen(){
	var docElm = document.documentElement;
	if (docElm.requestFullscreen) {         //标准
        docElm.requestFullscreen(); 
    } 
    else if (docElm.msRequestFullscreen) {      //ie11
        docElm.msRequestFullscreen(); 
    } 
    else if (docElm.mozRequestFullScreen) {     //FireFox
        docElm.mozRequestFullScreen(); 
    } 
    else if (docElm.webkitRequestFullScreen) {      //chrome等 
        docElm.webkitRequestFullScreen(); 
    } 
}
// 退出全屏
function ExitScreen(){
	if (document.exitFullscreen) { 
        document.exitFullscreen(); 
    } 
    else if (document.msExitFullscreen) { 
        document.msExitFullscreen(); 
    } 
    else if (document.mozCancelFullScreen) { 
        document.mozCancelFullScreen(); 
    } 
    else if (document.webkitCancelFullScreen) { 
        document.webkitCancelFullScreen(); 
    } 
    
}

可能出于用户操作体验的考虑吧，客户端javascript让浏览器全屏只能通过鼠标点击事件去触发

获取鼠标选中的文本

1、CSS3 ::selection 选择器（改变选中文本样式）

使被选中的文本的背景色成为#2fe1a8：

p::selection{background:#2fe1a8;} 
p::-webkit-selection{background:#2fe1a8;} 
p::-moz-selection{background:#2fe1a8;} 

2、获取鼠标选中的文本：

let text='';
if (window.getSelection) {
    text = window.getSelection().toString();
} else if (document.selection && document.selection.type != "Control") {
    text = document.selection.createRange().text;
}
console.log(text)

鼠标滚轮事件

<script type="text/javascript">
// 滚动事件
var scrollFunc = function(e) {
    e = e || window.event;
    if (e.wheelDelta) {
        if (e.wheelDelta > 0) {
            console.log('鼠标滚轮向上滚动！')
        } else if (e.wheelDelta < 0) {
            console.log('鼠标滚轮向下滚动！')
        }
    }
}
//给页面绑定滑轮滚动事件  
if (document.addEventListener) { //firefox  
    document.addEventListener('DOMMouseScroll', scrollFunc, false);
}
//滚动滑轮触发scrollFunc方法  //ie 谷歌  
document.onmousewheel = scrollFunc;
</script>

检测浏览器

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


var mb = myBrowser();   


function isIE() { 
	if (!!window.ActiveXObject || "ActiveXObject" in window){
		// ie10-11
		return true;
	}else{
		if ("IE" == mb) {
			alert("我是 IE");
		}
		if ("FF" == mb) {
		    alert("我是 Firefox");
		}
		if ("Chrome" == mb) {
		    //检测是否是谷歌内核(可排除360及谷歌以外的浏览器)
			function isChrome(){
				var ua = navigator.userAgent.toLowerCase();
				return ua.indexOf("chrome") > 1;
			}
			
			function _mime(option, value) {
				var mimeTypes = navigator.mimeTypes;
				for (var mt in mimeTypes) {
					if (mimeTypes[mt][option] == value) {
						return true;
					}
				}
				return false;
			}
			var is360 = _mime("type", "application/vnd.chromium.remoting-viewer");          
			if (isChrome() && is360) { 
				alert("我是360");
			}
		}
		if ("Opera" == mb) {
			alert("我是 Opera");
		}
		if ("Safari" == mb) {
			alert("我是 Safari");
		}
	}
}

禁止网站内容被复制粘贴

<script>
	// 禁止
	document.oncontextmenu=new Function("event.returnValue=false"); 
    document.onselectstart=new Function("event.returnValue=false"); 

    // 启用
    document.oncontextmenu=""; 
    document.onselectstart=true; 
</script>

待续……