📌 18 продвинутых навыков JavaScript для старших инженеров-программистов

🔵Браузер

▪ Переход на полноэкранный режим

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

▪ Выход из полноэкранного режима

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

▪ Вывод страницы

Чтобы вывести текущую страницу:
window.print()

▪ Изменение стиля выводимого контента

Чтобы при выводе страницы изменить текущий макет:
<style>
/* Используйте @media print, чтобы настроить стиль вывода */
@media print {
.noprint {
display: none;
}
}
</style>
<div class="print">print</div>
<div class="noprint">noprint</div>

▪ Блокировка события закрытия

Чтобы оградить пользователя от обновления или закрытия браузера, запустите событие beforeunload (некоторые браузеры не кастомизируют текстовой контент):
window.onbeforeunload = function(){
return 'Are you sure you want to leave the haorooms blog？';
};

▪ Запись экрана

Чтобы сделать запись текущего экрана для ее передачи или загрузки:
const streamPromise = navigator.mediaDevices.getDisplayMedia()
streamPromise.then(stream => {
var recordedChunks = [];// записанные видеоданные
var options = { mimeType: "video/webm; codecs=vp9" };// Установите формат кодирования
var mediaRecorder = new MediaRecorder(stream, options);// Инициализируйте экземпляр MediaRecorder
mediaRecorder.ondataavailable = handleDataAvailable;// Установите обратный вызов, когда данные будут доступны (конец записи экрана)
mediaRecorder.start();
// Фрагментация видео
function handleDataAvailable(event) {
if (event.data.size > 0) {
recordedChunks.push(event.data);// Добавление данных, event.data - объект BLOB
download();// Инкапсуляция в объект BLOB и загрузка
}
}
// Загрузка файла
function download() {
var blob = new Blob(recordedChunks, {
type: "video/webm"
});
// Видео можно загрузить здесь в бэкенд
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);
}
})

▪ Определение состояния горизонтального и вертикального экранов

Чтобы оценить состояние горизонтального или вертикального экрана мобильного телефона:
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);

▪ Различение стилей для горизонтального и вертикального экранов

Чтобы установить разные стили для горизонтального и вертикального экранов:
<style>
@media all and (orientation : landscape) {
body {
background-color: #ff0000;
}
}
@media all and (orientation : portrait) {
body {
background-color: #00ff00;
}
}
</style>

▪ Продолжение

@javascriptv