Windows open на весь экран

Распределенное обучение с TensorFlow и Python

AI_Generated 05.05.2025

В машинном обучении размер имеет значение. С ростом сложности моделей и объема данных одиночный процессор или даже мощная видеокарта уже не справляются с задачей обучения за разумное время. Когда. . .

CRUD API на C# и GraphQL

stackOverflow 05.05.2025

В бэкенд-разработке постоянно возникают новые технологии, призванные решить актуальные проблемы и упростить жизнь программистам. Одной из таких технологий стал GraphQL — язык запросов для API,. . .

Распознавание голоса и речи на C#

UnmanagedCoder 05.05.2025

Интеграция голосового управления в приложения на C# стала намного доступнее благодаря развитию специализированных библиотек и API. При этом многие разработчики до сих пор считают голосовое управление. . .

Реализация своих итераторов в C++

NullReferenced 05.05.2025

Итераторы в C++ — это абстракция, которая связывает весь экосистему Стандартной Библиотеки Шаблонов (STL) в единое целое, позволяя алгоритмам работать с разнородными структурами данных без знания их. . .

Разработка собственного фреймворка для тестирования в C#

UnmanagedCoder 04.05.2025

C# довольно богат готовыми решениями – NUnit, xUnit, MSTest уже давно стали своеобразными динозаврами индустрии. Однако, как и любой динозавр, они не всегда могут протиснуться в узкие коридоры. . .

Распределенная трассировка в Java с помощью OpenTelemetry

Javaican 04.05.2025

Микросервисная архитектура стала краеугольным камнем современной разработки, но вместе с ней пришла и головная боль, знакомая многим — отслеживание прохождения запросов через лабиринт взаимосвязанных. . .

Шаблоны обнаружения сервисов в Kubernetes

Mr. Docker 04.05.2025

Современные Kubernetes-инфраструктуры сталкиваются с серьёзными вызовами. Развертывание в нескольких регионах и облаках одновременно, необходимость обеспечения низкой задержки для глобально. . .

Создаем SPA на C# и Blazor

stackOverflow 04.05.2025

Мир веб-разработки за последние десять лет претерпел коллосальные изменения. Переход от традиционных многостраничных сайтов к одностраничным приложениям (Single Page Applications, SPA) — это. . .

Реализация шаблонов проектирования GoF на C++

NullReferenced 04.05.2025

«Банда четырёх» (Gang of Four или GoF) — Эрих Гамма, Ричард Хелм, Ральф Джонсон и Джон Влиссидес — в 1994 году сформировали канон шаблонов, который выдержал проверку временем. И хотя C++ претерпел. . .

C# и сети: Сокеты, gRPC и SignalR

UnmanagedCoder 04.05.2025

Сетевые технологии не стоят на месте, а вместе с ними эволюционируют и инструменты разработки. В . NET появилось множество решений — от низкоуровневых сокетов, позволяющих управлять каждым байтом. . .

window.open(URL, target, features)

* window.open блокируется браузером, если посетитель не совершил каких-то действий, допустим, нажал на кнопку. Это связано с негативным отношением к всплывающей рекламе.

Нажав на ссылку открыть несколько окон

открыть две ссылки одним кликом
открыть ссылку в новом окне, поменять текущую страницу

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html" onclick="window.open(this.href); window.open('http://shpargalkablog.ru/p/html-css-javascript.html'); return false;">открыть две ссылки одним кликом</a>

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#target" onclick="window.open(this.href, '_self'); window.open('http://shpargalkablog.ru/p/html-css-javascript.html'); return false;">открыть ссылку в новом окне, поменять текущую страницу</a>

return false; нужен чтобы запретить переход по ссылке и выполнить скрипт

Открыть ссылку в новом окне

открыть ссылку в новом окне, а не вкладке

<a href="http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#target" onclick="window.open(this.href, '', 'scrollbars=1'); return false;">открыть ссылку в новом окне, а не вкладке</a>

Открыть окно на весь экран

открыть ссылку в новом окне во весь экран

<a href="http://shpargalkablog.ru/2013/05/get-mouse-coordinates-inside-div.html#size-window" onclick="window.open(this.href, '', 'scrollbars=1,height='+screen.availHeight+',width='+screen.availWidth); return false;">открыть ссылку в новом окне во весь экран</a>

открыть текущее окно в полный экран (F11)

<a href="#" onclick="requestFullScreen(document.documentElement); return false;">открыть текущее окно в полный экран (F11)</a>

<script>
function requestFullScreen(element) {
    var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullscreen;
    if (requestMethod) {
        requestMethod.call(element);
    } else if (typeof window.ActiveXObject !== "undefined") { 
        var wscript = new ActiveXObject("WScript.Shell");
        if (wscript !== null) {
            wscript.SendKeys("{F11}");
        }
    }
}
</script>

Открыть окно определённого размера

открыть окно в 500px ширины и высоты, но не более размера экрана монитора

<a href="http://shpargalkablog.ru/2013/05/get-mouse-coordinates-inside-div.html#size-window" onclick="window.open(this.href, '', 'scrollbars=1,height='+Math.min(500, screen.availHeight)+',width='+Math.min(500, screen.availWidth)); return false;">открыть окно в 500px ширины и высоты, но не более размера экрана монитора</a>

Окно по середине экрана монитора

открыть окно по центру экрана монитора

<a href="http://shpargalkablog.ru/2013/05/get-mouse-coordinates-inside-div.html#size-window" onclick="newMyWindow(this.href); return false;">открыть окно по центру экрана монитора</a>

<script>
function newMyWindow(e) {
  var h = 500,
      w = 500;
  window.open(e, '', 'scrollbars=1,height='+Math.min(h, screen.availHeight)+',width='+Math.min(w, screen.availWidth)+',left='+Math.max(0, (screen.availWidth - w)/2)+',top='+Math.max(0, (screen.availHeight - h)/2));
}
</script>

Окно по середине окна браузера

открыть окно по центру окна браузера

<a href="http://shpargalkablog.ru/2013/05/get-mouse-coordinates-inside-div.html#size-window" onclick="newMyWindow1(this.href); return false;">открыть окно по центру окна браузера</a>

<script>
function newMyWindow1(href) {
  var d = document.documentElement,
      h = 500,
      w = 500,
      myWindow = window.open(href, 'myWindow', 'scrollbars=1,height='+Math.min(h, screen.availHeight)+',width='+Math.min(w, screen.availWidth)+',left='+Math.max(0, ((d.clientWidth - w)/2 + window.screenX))+',top='+Math.max(0, ((d.clientHeight - h)/2 + window.screenY)));

      
      if (myWindow.screenY >= (screen.availHeight - myWindow.outerHeight)) {myWindow.moveTo(myWindow.screenX, (screen.availHeight - myWindow.outerHeight))};
      if (myWindow.screenX >= (screen.availWidth - myWindow.outerWidth)) {myWindow.moveTo((screen.availWidth - myWindow.outerWidth), myWindow.screenY)};

}
</script>

Новое окно на JavaScript

<button onclick="myWindow()">Открыть</button>

<script>
function myWindow() {
    var w = window.open('', '', 'scrollbars=1');
    w.document.write('<!DOCTYPE html>\n\
<title>Заголовок</title>\n\
<p>Содержание <button onclick="window.close();">Закрыть</button>\n\
<script>\n\
alert("\x27одинарные кавычки в скрипте\x27;");\n\
<\x2fscript>');
}
</script>

Изменить данные главного окна из открытого

<button onclick="myWindow1()" id="raz">Открыть</button>
<script>
function myWindow1() {
    var myWindow1 = window.open('', 'myWindow1', 'scrollbars=1,height='+Math.min(200, screen.availHeight)+',width='+Math.min(500, screen.availWidth));
    myWindow1.document.write('<!DOCTYPE html>\n\
<title>Заголовок</title>\n\
<p>Содержание <button onclick="myWindow2();">Изменить текст кнопки с "Открыть" на "Нажать"</button>\n\
<scr' + 'ipt>function myWindow2() {window.opener.document.getElementById("raz").innerHTML = "Нажать"; window.close();}</scr' + 'ipt>');
}
</script>

Изменить открываемое окно

<button onclick="myWindow3()">Поменять заголовок, выделить его красным цветом</button>
<script>
function myWindow3() {
  var w = window.open('http://shpargalkablog.ru/2010/09/postroenie-ssylok-v-html.html#target', '', 'scrollbars=1');
  w.onload = function() {
    var z = this.document.getElementById("target");
    z.innerHTML = "Заголовок поменяли!!!!";
    z.style.color = "red";
  }
}
</script>

<button onclick="myWindow5(this)">Открыть</button>
<script>
function myWindow5(e) {
  if (e.nextSibling.nodeName.toLowerCase() != "iframe") {
    var iframe = document.createElement('iframe');
    iframe.setAttribute('src', 'http://shpargalkablog.ru/2014/11/window-opener.html');
    iframe.setAttribute('height', '200');
    e.parentNode.insertBefore(iframe, e.nextSibling);
  }
}
</script>
<style>
iframe[src^="http://shpargalkablog.ru/2014/11/window-opener.html"] { 
  width: 100%;
  border: none;
}
</style>



<button onclick="myWindow2();">Закрыть</button>
<script>
function myWindow2() {
  var raz = window.parent.document.querySelector('iframe[src^="http://shpargalkablog.ru/2014/11/window-opener.html"]'); 
  raz.parentNode.removeChild(raz);
}
</script>
<style>
html {
  overflow: hidden; 
}
</style>

<button onclick="myWindow4(this)">Заменить фон</button>
<iframe src="http://shpargalkablog.ru/2014/11/window-opener.html#dva" id="raz2"></iframe>
<script>
function myWindow4(e) {
  document.getElementById('raz2').contentWindow.document.getElementById('dva').style.background = 'blue';
}
</script>

Советую к прочтению: javascript.ru

Открыть новое окно на весь экран (Вариант 1)

Открыть новое окно на весь экран (Вариант 2)

Открыть новое окно на весь экран (Вариант 3)

Исходный код этого примера:

<script>
function fullScreen1(theURL) {
    window.open(theURL, '', 'fullscreen=yes,scrollbars=auto,menubar=no,toolbar=no,location=no,status=no');
}
function fullScreen2(theURL) {
    window.open(theURL, '','height='+screen.height+',width='+screen.width+',screenX=0,screenY=0,left=0,top=0,resizable=no');
}
//Ищем правильный метод
function fullscreen3(element) {
    if(element.requestFullScreen) {
        element.requestFullScreen();
    } else if(element.mozRequestFullScreen) {
        element.mozRequestFullScreen();
    } else if(element.webkitRequestFullScreen) {
        element.webkitRequestFullScreen();
    }
}
</script>

<p>
  <a href="#" onClick="fullScreen1('http://htmlweb.ru/java/example/full_screen.php');return false;">
    Открыть новое окно на весь экран (Вариант 1)
  </a>
</p>
<p>
  <a href="#" onClick="fullScreen2('http://htmlweb.ru/java/example/full_screen.php');return false;">
    Открыть новое окно на весь экран (Вариант 2)
  </a>
</p>
<p>
  <a href="#" onClick="fullscreen3(document.documentElement);return false;">
      Открыть новое окно на весь экран (Вариант 3)
  </a>
</p>

Вариант для IE:

<script type="text/javascript"><!--
var ws=new ActiveXObject("WScript.Shell");
function clc(){
  ws.SendKeys("{F11}");
}
</script>
<button onclick="clc()">Click</button>

Про метод SendKeys можно почитать здесь

Если Вы хотите запретить переключать окна/вкладки добавьте к body onBlur="self.focus()";

Некоторые пользователи могут не знать, как выйти из полноэкранного режима.
Вы должны обеспечить пользователя информацией по поводу того, как вернуться из полноэкранного режима в обычный.

Методы для работы в полноэкранном режиме

// IE
document.msRequestFullscreen();
document.msCancelFullScreen();

// Webkit (works in Safari)
element.webkitRequestFullScreen();
document.webkitCancelFullScreen();

// W3C Proposal
element.requestFullscreen();
document.exitFullscreen();

Псевдоклассы CSS для полноэкранного режима

Благодаря специальным псевдоклассам CSS, вы можете изменить размеры некоторых элементов страницы при переходе в полноэкранный режим:

/* изменяем размер шрифта */
:-webkit-full-screen,
:-ms-fullscreen,
:fullscreen {
  font-size: 16px;
}

/*меняем отдельный элемент */
:-webkit-full-screen img,
:-ms-fullscreen img,
:fullscreen img {
  width: 100%;
  height: 100%;
}

Открытие, закрытие и позиционирование окон

Последнее обновление: 01.11.2023

Язык JavaScript позволят программно управлять окнами веб-браузера. Для этого объект window
предоставляет ряд методов. Так, метод open() открывает определенный ресурс
в новом окне или вкладке браузера. Стоит учитывать, что подобное действие лучше выполнять по действию пользователя, например, по нажатию на кнопку, потому что
в ином случае браузеры могут заблокировать подобные окна. Например, определим следующую страницу:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<button onclick="openWindow()">Click</button>
<script>
function openWindow(){
  window.open("https://microsoft.com");
}
</script>
</body>
</html>

Здесь на веб-странице определена кнопка — элемент button. У кнопки установлен атрибут onclick, который указывает на функцию javascript,
которая будет выполняться по нажатию этой кнопки.

В коде javascript определена функция openWindow(), которая выполняется по нажатию на кнопку. В этой функции выполняется функция window.open(),
в которую в качестве первого параметра передается адрес — в данном случае «https://microsoft.com». И по нажатию на кнопку будет открываться в новой вкладке страницы «https://microsoft.com».

Картинка с сайта: metanit.com

Метод open() принимает ряд параметров:

open();
open(url);
open(url, target);
open(url, target, windowFeatures);

В качестве первого параметра — url передается путь к ресурсу.

Второй параметр — target передается путь к ресурсу. Распространенные значения:

• _self: страница открывается в текущей вкладке

• _blank: страница открывается в новой вкладке или в отдельном окне

Например, открытие адреса в той же вкладке:

window.open("https://metanit.com", "_self");

Третий параметр позволяет установить набор стилевых характеристик окна. Каждая стилевая характеристика определяется в виде наборов name=value, где name — название стилевой характеристики, а
value — ее значение. Друг от друга стилевые характеристики отделены запятой.

В частности, можно использовать следующие характеристики:

• popup: указывает, будет ли открываться страница в отдельном всплывающем окне. Для этого может принимать такие
  значения, как yes, 1 или true. Например:

  window.open("https://metanit.com", "_blank", "popup=yes");

  

  Картинка с сайта: metanit.com

• width / innerWidth: ширина окна в пикселях. Например, width=640

• height / innerHeight: высота окна в пикселях. Например, height=480

• left / screenX: координата X относительно начала экрана в пикселях. Например, left=0

• top / screenY: координата Y относительно начала экрана в пикселях. Например, top=0

• location: указывает, будет ли отображаться адресная строка. Например, location=yes

• menubar: указывает, будет ли отображаться панель меню. Например, menubar=yes

• scrollbars: указывает, будет ли окно иметь полосы прокрутки. Например, scrollbars=yes

• status: указывает, будет ли отображаться строка состояния. Например, status=yes

• toolbar: указывает, будет ли отображаться панель инструментов. Например, toolbar=yes

Последние пять параметров в качестве значений могут принимать yes и no, вместо которых также можно использовать
1 и 0 соответственно

Пример применения нескольких параметров:

window.open("https://metanit.com", "_blank", "width=600,height=400,left=500,top=200");

Стоит отметить, что функция возвращает ссылку на окно, и с помощью этой ссылки мы можем управлять окном.

Также стоит отметить, что через свойство opener окна можно получить ссылку на главное окно, из которого было открыто текущее.

Закрытие окна

С помощью метода close() можно закрыть окно. Например:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<button onclick="openWindow()">Open</button>
<button onclick="closeWindow()">Close</button>
<script>
let metanitWindow = null;

function openWindow(){
    if(!metanitWindow || metanitWindow.closed){  // если окно не открыто
        metanitWindow = window.open("https://metanit.com", "_blank", "width=600,height=400,left=500,top=200,popup=yes");
   }
}
function closeWindow(){
    metanitWindow?.close(); // если окно открыто, то закрываем его
    metanitWindow = null;
}
</script>
</body>
</html>

Здесь определены две кнопки для открытия и закрытия окна. Ссылка на само окно помещается в переменную metanitWindow, которая изначально равна null.
По нажатию на первую кнопку вызывается функция openWindow(). В этой функции проверяем, что metanitWindow не равен null и что окно не закрыто
(metanitWindow.closed не равно false).
Вторая проверка необходима на случай, если окно будет закрыто нажатием на крестик в самом окне (в этом случае closed=true). И если окно не открыто, открываем его.

По нажатию на вторую кнопку у объекта metanitWindow вызываем метод close и устанавливаем переменную в null.

Управление позицией и размером окна

Для управления/изменения позиции и размера окна объект window предоставляет ряд методов:

• moveBy(): перемещает текущее окно браузера по горизонтали и вертикали на указанное количество пикселей. Первый параметр определяет перемещение по горизонтали, второй параметр — перемещение по вертикали в пикселях.

• moveTo(): перемещает текущее окно браузера по горизонтали и вертикали в указанное положение. Первый параметр определяет положение по горизонтали, второй параметр — положение по вертикали в пикселях.

• resizeBy(): масштабирует текущее окно браузера по горизонтали и вертикали на указанное количество пикселей. Первый параметр определяет значение масштабирования по горизонтали, второй параметр — значение масштабирования по вертикали.

• resizeTo(): масштабирует текущее окно браузера по горизонтали и вертикали до заданного размера. Первый параметр определяет ширину, второй параметр — высоту.

• scroll(): прокручивает содержимое окна до указанной позиции. Первый параметр указывает положение по горизонтали, второй параметр — положение по вертикали.

• scrollBy(): прокручивает содержимое окна на указанный коэффициент. Первый параметр определяет коэффициент прокрутки по горизонтали, второй параметр определяет коэффициент прокрутки по вертикали.

• scrollTo(): прокручивает содержимое окна до указанной позиции. Первый параметр указывает положение по горизонтали, второй параметр — положение по вертикали.

Примеры управления позицией и размерами окна:

// сдвигаем окно браузера на 200 пикселей по горизонтали и на 100 пикселей по вертикали
window.moveBy(200, 100);
// Помещаем окно браузера на позицию с координатами (200, 150)
window.moveTo(200, 150);
// Увеличиваем окно браузера на 200 пиксей в ширину и 100 пикселей в высоту
window.resizeBy(200, 100);
// Сжимаем окно браузера на 200 пиксей в ширину и 100 пикселей в высоту
window.resizeBy(-200, -100);
// Прокручиваем контент окна на 100 пикселей по горизонтали и 200 пикселей по вертикали
window.scrollBy(100, 200);
// Прокручиваем содержимое браузера до позиции (100, 200)
window.scrollTo(100, 200);

Но стоит отметить, что на уровне браузера могут действовать ограничения на позиционирование и изменения размера окон, если окна загружают ресурсы с разных доменов.

Например, с помощью метода moveTo() переместитм окно на новую позицию:

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>METANIT.COM</title>
</head>
<body>
<button onclick="openWindow()">Open</button>
<button onclick="moveWindow()">Move</button>
<script>
let testWindow = null;

// открываем окно
function openWindow(){
    testWindow = window.open("test.html", "_blank", "width=600,height=400,left=200,top=200");
}
// сдвигаем окно
function moveWindow(){
    testWindow.moveTo(500,400);
}
</script>
</body>
</html>

В данном случае по нажатию на кнопку Open открываем окно, а по нажатию на кнопку Move перемещаем его на позицию с координатами x=500, y=400 относительно
левого верхнего угла экрана.

Displaying a web page in fullscreen is an effective way to make a strong impression on users and generate deep engagement. This technique, often used in Flash-based websites in the past, can be implemented using JavaScript. This article will explain how to do it in detail.

What is window.open?

The window.open method is widely used to open new windows or tabs in a browser. By using this method, you can display specific content in a new window.

Code Snippet:

function openWin(theURL,winName,features) {
  window.open(theURL,winName,features);
}

　
Here, theURL is the URL of the page to be displayed in the new window, winName is the name of the new window, and features specifies the options for the window.

Encouraging User Action: Creating a Link

To allow users to open a new window, you can embed the JavaScript function in an HTML link as shown below.

HTML Code:

<a href="javascript:openWin('full.html','main','toolbar=no,location=no,status=no,menubar=no,scrollbars=no,resizable=yes,width=1000,height=550');" title="JavaScript demo to display the browser in fullscreen (destination)">Click this link</a>

　
Each parameter specified here is passed to the openWin function, and a new window opens.

Setting Up the New Window: Achieving Fullscreen Display

When the new window opens, use the following JavaScript code to make it fullscreen.

JavaScript Code:

self.moveTo(0,0);
self.resizeTo(screen.availWidth,screen.availHeight);
self.focus();

　
This code expands the window to cover the entire screen, grabbing the user’s attention.

Importance of Visual Design

Using CSS, you can make the fullscreen content visually appealing.

CSS Snippet:

body {
    margin: 0;
}
h1{
    font-size:16px;
    font-weight:normal;
    line-height:1.2em;
    text-align:center;
}
a{
    font-size:16px;
    text-decoration:none;
}

　
HTML elements also play a crucial role in enhancing user experience. Appropriate titles and descriptions can further highlight the content.

HTML Snippet:

<h1>JavaScript Demo to Display the Browser in Fullscreen (Destination)</h1>
<div align="center">
The browser is displayed in fullscreen.
</div>

JavaScript Demo to Display the Browser in Fullscreen (Source Page)

Check out the detailed demo to see how fullscreen display works. Access the link below to experience the techniques discussed so far.

JavaScript Demo to Display the Browser in Fullscreen (Source)

Conclusion

Displaying a web page in fullscreen can capture users’ attention and make a strong impact. This can enhance user experience and increase the value of your site or content. I hope this article has helped you understand how to use the window.open method for fullscreen display.

Of course, this technique is just one of many possibilities in web development. From an SEO perspective, improving the quality of content and usability is important, so apply techniques with this in mind.

I hope your website can provide even more value to users by using this technique.

Use fullscreen display with consideration for usability and accessibility, and in an appropriate context. Note that popup blockers and mobile browsers may not behave as expected.

　
※ Use at your own risk. Do not reuse the Google Analytics tags within the demo page tags.