📌 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> ▪ Продолжение @javascript_react