强大JavaScript 技巧

浏览器

01、实现全屏

当您需要将当前屏幕显示为全屏时

function fullScreen() {      const el = document.documentElement    const rfs =     el.requestFullScreen ||     el.webkitRequestFullScreen ||     el.mozRequestFullScreen ||     el.msRequestFullscreen    if(typeof rfs != "undefined" && rfs) {        rfs.call(el)    }}fullScreen()

02、退出全屏

当您需要退出全屏时​​​​​​​

function exitScreen() {    if (document.exitFullscreen) {         document.exitFullscreen()    }     else if (document.mozCancelFullScreen) {         document.mozCancelFullScreen()    }     else if (document.webkitCancelFullScreen) {         document.webkitCancelFullScreen()    }     else if (document.msExitFullscreen) {         document.msExitFullscreen()    }     if(typeof cfs != "undefined" && cfs) {        cfs.call(el)    }}exitScreen()

03、页面打印

当您需要打印当前页面时

window.print()

04、打印内容风格变更

当需要打印出当前页面，但需要修改当前布局时​​​​​​​

print
noprint

05、阻止关闭事件

当需要阻止用户刷新或关闭浏览器时，可以选择触发beforeunload事件，有些浏览器无法自定义文本内容​​​​​​​

window.onbeforeunload = function(){    return 'Are you sure you want to leave the haorooms blog？';};

06、屏幕录制

当您需要录制当前屏幕并上传或下载屏幕录制时​​​​​​​

const streamPromise = navigator.mediaDevices.getDisplayMedia()streamPromise.then(stream => {    var recordedChunks = [];// recorded video datavar options = { mimeType: "video/webm; codecs=vp9" };// Set the encoding format    var mediaRecorder = new MediaRecorder(stream, options);// Initialize the MediaRecorder instance    mediaRecorder.ondataavailable = handleDataAvailable;// Set the callback when data is available (end of screen recording)    mediaRecorder.start();    // Video Fragmentation    function handleDataAvailable(event) {        if (event.data.size > 0) {            recordedChunks.push(event.data);// Add data, event.data is a BLOB object            download();// Encapsulate into a BLOB object and download        }    }// file download    function download() {        var blob = new Blob(recordedChunks, {            type: "video/webm"        });        // Videos can be uploaded to the backend here        var url = URL.createObjectURL(blob);        var a = document.createElement("a");        document.body.appendChild(a);        a.style = "display: none";        a.href = url;        a.download = "test.webm";        a.click();        window.URL.revokeObjectURL(url);    }})

07、判断横屏和竖屏

当您需要判断手机横屏或竖屏状态时​​​​​​​

function hengshuping(){    if(window.orientation==180||window.orientation==0){        alert("Portrait state！")    }    if(window.orientation==90||window.orientation==-90){        alert("Landscape state！")    }}window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);

08、改变横竖屏样式

当你需要为横竖屏设置不同的样式时​​​​​​​

09、标签页隐藏

当需要监听tab显示和隐藏事件时​​​​​​​

const {hidden, visibilityChange} = (() => {    let hidden, visibilityChange;    if (typeof document.hidden !== "undefined") {      // Opera 12.10 and Firefox 18 and later support      hidden = "hidden";      visibilityChange = "visibilitychange";    } else if (typeof document.msHidden !== "undefined") {      hidden = "msHidden";      visibilityChange = "msvisibilitychange";    } else if (typeof document.webkitHidden !== "undefined") {      hidden = "webkitHidden";      visibilityChange = "webkitvisibilitychange";    }    return {      hidden,      visibilityChange    }})();
const handleVisibilityChange = () => {    console.log("currently hidden", document[hidden]);};document.addEventListener(    visibilityChange,    handleVisibilityChange,    false);

图片

10、本地图片预览

当您从客户端获取图片但无法立即上传到服务器，但需要预览时​​​​​​​

11、图片预加载

当图片较多时，需要预加载图片以避免白屏​​​​​​​

const images = []function preloader(args) {    for (let i = 0, len = args.length; i < len; i++) {          images[i] = new Image()          images[i].src = args[i]    } }  preloader(['1.png', '2.jpg'])

JavaScript

12、字符串脚本

当需要将一串字符串转换为JavaScript脚本时，该方法存在xss漏洞，请谨慎使用

 ​​​​​​

const obj = eval('({ name: "jack" })')// obj will be converted to object{ name: "jack" }const v = eval('obj')// v will become the variable obj

13、递归函数名解耦

当需要编写递归函数时，声明了函数名，但是每次修改函数名时，总是忘记修改内部函数名。argument是函数的内部对象，包括传入函数的所有参数，arguments.callee代表函数名。​​​​​​​

// This is a basic Fibonacci sequencefunction fibonacci (n) {    const fn = arguments.callee    if (n <= 1) return 1    return fn(n - 1) + fn(n - 2)}

DOM 元素

14、隐性判断

当需要判断某个dom元素当前是否出现在页面视图中时，可以尝试使用IntersectionObserver来判断。​​​​​​​

  
Invisible  
Invisible  
Invisible

15、元素可编辑

当你需要编辑一个dom元素时，让它像文本区域一样点击。

here can be edited

16、元素属性监控​​​​​​​

testOK

17、打印 dom 元素

当开发过程中需要打印dom元素时，使用console.log往往只能打印出整个dom元素，而无法查看dom元素的内部属性。你可以尝试使用 console.dir

console.dir(document.body)

其他

18、激活应用程序

当你在移动端开发时，你需要打开其他应用程序。还可以通过location.href赋值来操作以下方法​​​​​​​

phoneandroid message ios messageios message