建站
咨詢
售后
建站咨詢
新聞中心
瀏覽器
01、實現(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í)r
為鹽湖等地區(qū)用戶提供了全套網(wǎng)頁設(shè)計制作服務(wù)，及鹽湖網(wǎng)站建設(shè)行業(yè)解決方案。主營業(yè)務(wù)為做網(wǎng)站、成都做網(wǎng)站、鹽湖網(wǎng)站設(shè)計，以傳統(tǒng)方式定制建設(shè)網(wǎng)站，并提供域名空間備案等一條龍服務(wù)，秉承以專業(yè)、用心的態(tài)度為用戶提供真誠的服務(wù)。我們深信只要達(dá)到每一位用戶的要求，就會得到認(rèn)可，從而選擇與我們長期合作。這樣，我們也可以走得更遠(yuǎn)！
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)前頁面時
window.print()04、打印內(nèi)容風(fēng)格變更
當(dāng)需要打印出當(dāng)前頁面，但需要修改當(dāng)前布局時
print
05、阻止關(guān)閉事件
當(dāng)需要阻止用戶刷新或關(guān)閉瀏覽器時，可以選擇觸發(fā)beforeunload事件，有些瀏覽器無法自定義文本內(nèi)容
window.onbeforeunload = function(){
return 'Are you sure you want to leave the haorooms blog？';
};06、屏幕錄制
當(dāng)您需要錄制當(dāng)前屏幕并上傳或下載屏幕錄制時
const streamPromise = navigator.mediaDevices.getDisplayMedia()
streamPromise.then(stream => {
var recordedChunks = [];// recorded video data
var 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)時
const streamPromise = navigator.mediaDevices.getDisplayMedia()
streamPromise.then(stream => {
var recordedChunks = [];// recorded video data
var 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è)置不同的樣式時
09、標(biāo)簽頁隱藏
當(dāng)需要監(jiān)聽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、本地圖片預(yù)覽
當(dāng)您從客戶端獲取圖片但無法立即上傳到服務(wù)器，但需要預(yù)覽時
![]()
11、圖片預(yù)加載
當(dāng)圖片較多時，需要預(yù)加載圖片以避免白屏
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、字符串腳本
當(dāng)需要將一串字符串轉(zhuǎn)換為JavaScript腳本時，該方法存在xss漏洞，請謹(jǐn)慎使用
const obj = eval('({ name: "jack" })')
// obj will be converted to object{ name: "jack" }
const v = eval('obj')
// v will become the variable obj13、遞歸函數(shù)名解耦
當(dāng)需要編寫遞歸函數(shù)時，聲明了函數(shù)名，但是每次修改函數(shù)名時，總是忘記修改內(nèi)部函數(shù)名。argument是函數(shù)的內(nèi)部對象，包括傳入函數(shù)的所有參數(shù)，arguments.callee代表函數(shù)名。
// This is a basic Fibonacci sequence
function fibonacci (n) {
const fn = arguments.callee
if (n <= 1) return 1
return fn(n - 1) + fn(n - 2)
}DOM 元素
14、隱性判斷
當(dāng)需要判斷某個dom元素當(dāng)前是否出現(xiàn)在頁面視圖中時，可以嘗試使用IntersectionObserver來判斷。
Invisible
Invisible
Invisible
15、元素可編輯
當(dāng)你需要編輯一個dom元素時，讓它像文本區(qū)域一樣點擊。
here can be edited16、元素屬性監(jiān)控
test
17、打印 dom 元素
當(dāng)開發(fā)過程中需要打印dom元素時，使用console.log往往只能打印出整個dom元素，而無法查看dom元素的內(nèi)部屬性。你可以嘗試使用 console.dir
console.dir(document.body)其他
18、激活應(yīng)用程序
當(dāng)你在移動端開發(fā)時，你需要打開其他應(yīng)用程序。還可以通過location.href賦值來操作以下方法
phone
android message
ios message
ios message總結(jié)
以上就是我今天想與你分享的全部內(nèi)容，希望對你有所幫助，最后，感謝你的閱讀，祝編程愉快!
文章名稱：18個高級工程師必須會的強(qiáng)大JavaScript技巧
文章出自：http://fisionsoft.com.cn/article/cohdjjs.html
