瀏覽器

wYx28資訊網(wǎng)——每日最新資訊28at.com

01、實(shí)現(xiàn)全屏當(dāng)您需要將當(dāng)前屏幕顯示為全屏?xí)r

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、退出全屏

當(dāng)您需要退出全屏?xí)rwYx28資訊網(wǎng)——每日最新資訊28at.com

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、頁面打印

當(dāng)您需要打印當(dāng)前頁面時(shí)wYx28資訊網(wǎng)——每日最新資訊28at.com

window.print()

04、打印內(nèi)容風(fēng)格變更

當(dāng)需要打印出當(dāng)前頁面，但需要修改當(dāng)前布局時(shí)wYx28資訊網(wǎng)——每日最新資訊28at.com

<style>/* Use @media print to adjust the print style you need */@media print {    .noprint {        display: none;    }}</style><class="print">print</div><class="noprint">noprint</div>

05、阻止關(guān)閉事件

當(dāng)需要阻止用戶刷新或關(guān)閉瀏覽器時(shí)，可以選擇觸發(fā)beforeunload事件，有些瀏覽器無法自定義文本內(nèi)容wYx28資訊網(wǎng)——每日最新資訊28at.com

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

06、屏幕錄制

當(dāng)您需要錄制當(dāng)前屏幕并上傳或下載屏幕錄制時(shí)wYx28資訊網(wǎng)——每日最新資訊28at.com

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、判斷橫屏和豎屏

當(dāng)您需要判斷手機(jī)橫屏或豎屏狀態(tài)時(shí)wYx28資訊網(wǎng)——每日最新資訊28at.com

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);    }})

08、改變橫豎屏樣式

當(dāng)你需要為橫豎屏設(shè)置不同的樣式時(shí)wYx28資訊網(wǎng)——每日最新資訊28at.com

<style>@media all and (orientation : landscape) {    body {        background-color: #ff0000;    }}@media all and (orientation : portrait) {    body {        background-color: #00ff00;    }}</style>

09、標(biāo)簽頁隱藏

當(dāng)需要監(jiān)聽tab顯示和隱藏事件時(shí)wYx28資訊網(wǎng)——每日最新資訊28at.com

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);

圖片wYx28資訊網(wǎng)——每日最新資訊28at.com

10、本地圖片預(yù)覽

當(dāng)您從客戶端獲取圖片但無法立即上傳到服務(wù)器，但需要預(yù)覽時(shí)wYx28資訊網(wǎng)——每日最新資訊28at.com

<class="test">    <input type="file" name="" id="">    <img src="" alt=""></div><script>const getObjectURL = (file) => {    let url = null;    if (window.createObjectURL != undefined) { // basic        url = window.createObjectURL(file);    } else if (window.URL != undefined) { // webkit or chrome        url = window.URL.createObjectURL(file);    } else if (window.URL != undefined) { // mozilla(firefox)        url = window.URL.createObjectURL(file);    }    return url;}document.querySelector('input').addEventListener('change', (event) => {    document.querySelector('img').src = getObjectURL(event.target.files[0])})</script>

wYx28資訊網(wǎng)——每日最新資訊28at.com

11、圖片預(yù)加載

當(dāng)圖片較多時(shí)，需要預(yù)加載圖片以避免白屏wYx28資訊網(wǎng)——每日最新資訊28at.com

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'])

JavaScriptwYx28資訊網(wǎng)——每日最新資訊28at.com

12、字符串腳本

當(dāng)需要將一串字符串轉(zhuǎn)換為JavaScript腳本時(shí)，該方法存在xss漏洞，請(qǐng)謹(jǐn)慎使用wYx28資訊網(wǎng)——每日最新資訊28at.com

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

13、遞歸函數(shù)名解耦

當(dāng)需要編寫遞歸函數(shù)時(shí)，聲明了函數(shù)名，但是每次修改函數(shù)名時(shí)，總是忘記修改內(nèi)部函數(shù)名。argument是函數(shù)的內(nèi)部對(duì)象，包括傳入函數(shù)的所有參數(shù)，arguments.callee代表函數(shù)名。wYx28資訊網(wǎng)——每日最新資訊28at.com

// 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 元素wYx28資訊網(wǎng)——每日最新資訊28at.com

14、隱性判斷

當(dāng)需要判斷某個(gè)dom元素當(dāng)前是否出現(xiàn)在頁面視圖中時(shí)，可以嘗試使用IntersectionObserver來判斷。wYx28資訊網(wǎng)——每日最新資訊28at.com

<style>.item {    height: 350px;}</style><class="container">  <class="item" data-id="1">Invisible</div>  <class="item" data-id="2">Invisible</div>  <class="item" data-id="3">Invisible</div></div><script>  if (window?.IntersectionObserver) {    let items = [...document.getElementsByClassName("item")]; // parses as a true array, also available Array.prototype.slice.call()let io = new IntersectionObserver(      (entries) => {        entries.forEach((item) => {          item.target.innerHTML =            item.intersectionRatio === 1 // The display ratio of the element, when it is 1, it is completely visible, and when it is 0, it is completely invisible              ? `Element is fully visible`              : `Element is partially invisible`;        });      },      {        root: null,        rootMargin: "0px 0px",        threshold: 1, // The threshold is set to 1, and the callback function is triggered only when the ratio reaches 1      }    );    items.forEach((item) => io.observe(item));  }</script>

15、元素可編輯

當(dāng)你需要編輯一個(gè)dom元素時(shí)，讓它像文本區(qū)域一樣點(diǎn)擊。wYx28資訊網(wǎng)——每日最新資訊28at.com

<contenteditable="true">here can be edited</div>

16、元素屬性監(jiān)控

<id="test">test</div><button onclick="handleClick()">OK</button><script>  const el = document.getElementById("test");  let n = 1;  const observe = new MutationObserver((mutations) => {    console.log("attribute is changede", mutations);  })  observe.observe(el, {    attributes: true  });  function handleClick() {    el.setAttribute("style", "color: red");    el.setAttribute("data-name", n++);  }  setTimeout(() => {    observe.disconnect(); // stop watch  }, 5000);</script>

17、打印 dom 元素

當(dāng)開發(fā)過程中需要打印dom元素時(shí)，使用console.log往往只能打印出整個(gè)dom元素，而無法查看dom元素的內(nèi)部屬性。你可以嘗試使用 console.dirwYx28資訊網(wǎng)——每日最新資訊28at.com

console.dir(document.body)

其他wYx28資訊網(wǎng)——每日最新資訊28at.com

18、激活應(yīng)用程序

當(dāng)你在移動(dòng)端開發(fā)時(shí)，你需要打開其他應(yīng)用程序。還可以通過location.href賦值來操作以下方法wYx28資訊網(wǎng)——每日最新資訊28at.com

<a href="tel:12345678910">phone</a><a href="sms:12345678910,12345678911?body=hello">android message</a> <a href="sms:/open?addresses=12345678910,12345678911&body=hello">ios message</a><a href="wx://">ios message</a>

總結(jié)

以上就是我今天想與你分享的全部?jī)?nèi)容，希望對(duì)你有所幫助，最后，感謝你的閱讀，祝編程愉快!wYx28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-5744-0.html18 個(gè)高級(jí)工程師必須會(huì)的強(qiáng)大JavaScript 技巧

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 新興技術(shù)趨勢(shì)將徹底改變我們的世界

下一篇： SpringCloud Gateway 路由如何定位從底層源碼分析