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>

待续……