Форум

Vahan60 · #1 (**permalink**) 12.03.2021, 12:22

Доброго времени суток.

Пишу приложение для Хром. Стартовая страница "Меню". Её задача - сориентировать пользователя какую страницу открыть второй по клику на "Вutton". А вот на этой (второй) странице есть кнопка "FullScreen", по клику переводящий страницу в полноэкранный режим.

Так вот: я хочу сделать так, чтобы по клику на "Вutton" вторая страница открывалась сразу в полноэкранном режиме.

Для этого написал так:

Код:

<html>
  <head>
    <meta charset="UTF-8" />
    <title></title>
	<link rel="stylesheet" href="styleSt.css"  />
  </head>
  <body>
	<div class = "menu">
		  <button class = "page"><h1>страница1</h1></button>
          <button class = "page"><h1>страница2</h1></button>
          <button class = "page"><h1>страница3</h1></button>
          <button class = "page"><h1>страница4</h1></button>
    </div>
    
    <script>
      let bd = document.querySelector ("body");
      let page = document.querySelectorAll(".lang");
	  for (let j = 0; j < 4; j++){
      page[j].addEventListener ("click", function() {	  
	      document.location.href = "index2.html";
          bd.requestFullscreen();
          let target = event.target;
          target.style.display = "none";
	  }) 
      };	  
    </script>
  </body>
</html>

Код работает наполовину. Новая страница открывается, но не в полноэкранном режиме.
В чём дело, где я ошибаюсь?

рони · #2 (**permalink**) 12.03.2021, 12:32

Vahan60,
вторая строка скрипта.

if(document.location.href == "index2.html") bd.requestFullscreen();

Vahan60 · #3 (**permalink**) 12.03.2021, 13:05

Переписал.
Получилось следующее:

Код:

<script>
     
      let bd = document.querySelector ("body");
      let page = document.querySelectorAll(".lang");
	  for (let j = 0; j < 4; j++){
      page[j].addEventListener ("click", function() {	  
	   if(document.location.href == "index2.html") bd.requestFullscreen();
          bd.requestFullscreen();
          let target = event.target;
          target.style.display = "none";
	  }) 
      };	  
    
    </script>

Открывает в полноэкранном режиме, но не переходит на вторую страницу.

рони · #4 (**permalink**) 12.03.2021, 13:36

Vahan60,

let bd = document.querySelector("body");
if (document.location.href == "index2.html") {
    bd.requestFullscreen();
}
let page = document.querySelectorAll(".lang");
for (let j = 0; j < 4; j++) {
    page[j].addEventListener("click", function() {
        document.location.href = "index2.html"
    })
};

Vahan60 · #5 (**permalink**) 12.03.2021, 14:00

Все равно фулскрин не работает.
Я даже максимально упростил страницу. Указал конкретную кнопку без перебора.

<script>
let bd = document.querySelector("body");
          if (document.location.href == "test2.html") {
             bd.requestFullscreen();
             }   

let page = document.querySelectorAll(".page");
        page[3].addEventListener("click", function() {
        document.location.href = "test2.html"
    });


    </script>

Все равно не получается.

Vahan60 · #6 (**permalink**) 12.03.2021, 14:45

Это максимально упрощенный код первой страницы:

Код:

<html>
  <head>
    <meta charset="UTF-8" />
    <title>TEST</title>
	
  </head>
  <body>

	<div class = "menu">
	  <button class = "page"><h1>страница1</h1></button>
          <button class = "page"><h1>страница2</h1></button>
          <button class = "page"><h1>страница3</h1></button>
          <button class = "page"><h1>страница4</h1></button>
         </div>
    
	<script>
	
      let bd = document.querySelector("body");
          if (document.location.href == "test2.html") {
             bd.requestFullscreen();
             };

	let page = document.querySelectorAll(".page");
        page[3].addEventListener("click", function() {
        document.location.href = "test2.html"
    });	
	
    </script>

  </body>
</html>

А это код второй страницы:

Код:

<html>
  <head>
    <meta charset="UTF-8" />
    <title>TEST2</title>
	
  </head>
  <body>

	<div class = "menu">
	  <button class = "page"><h1>страница1</h1></button>
          <button class = "page"><h1>страница2</h1></button>
          <button class = "page"><h1>страница3</h1></button>   
         </div>
    
  </body>
</html>

При клике на button "страница4" на странице "TEST" страница "TEST2" должна открыться в fullscreen режиме. Но открывается в стандартном режиме.
Почему?

рони · #7 (**permalink**) 12.03.2021, 15:21

Vahan60,
потому что вторая страница не знает ни о каких кликах на первой странице.

рони · #8 (**permalink**) 12.03.2021, 15:23

Vahan60,
это вниз на вторую страницу.

let bd = document.querySelector("body");
          
             bd.requestFullscreen();

это на первую

let page = document.querySelectorAll(".page");
        page[3].addEventListener("click", function() {
        document.location.href = "test2.html"
    });

Vahan60 · #9 (**permalink**) 13.03.2021, 10:01

Нее. Не хочет

Код:

<html>
  <head>
    <meta charset="UTF-8" />
    <title>TEST</title>
	
  </head>
  <body>
	<div class = "menu">
		  <button class = "page"><h1>страница1</h1></button>
          <button class = "page"><h1>страница2</h1></button>
          <button class = "page"><h1>страница3</h1></button>
          <button class = "page"><h1>страница4</h1></button>
    </div>
    
	<script>
	
	let page = document.querySelectorAll(".page");
        page[3].addEventListener("click", function() {
        document.location.href = "test2.html"
    });


    </script>

  </body>
</html>

Код:

<html>
  <head>
    <meta charset="UTF-8" />
    <title>TEST2</title>
	
  </head>
  <body>
	<div class = "menu">
		  <button class = "page"><h1>страница1</h1></button>
          <button class = "page"><h1>страница2</h1></button>
          <button class = "page"><h1>страница3</h1></button>
          
    </div>
    <script>
	
	let bd = document.querySelector("body");
             bd.requestFullscreen();

    </script>
  </body>
</html>

Еще и консоль ругается :

"test2.html:17 Failed to execute 'requestFullscreen' on 'Element': API can only be initiated by a user gesture.
(anonymous) @ test2.html:17"

"test2.html:17 Uncaught (in promise) TypeError: fullscreen error
at test2.html:17"

рони · #10 (**permalink**) 13.03.2021, 10:09

Сообщение от Vahan60

Еще и консоль ругается :

переход в полноэкранный режим, возможен только по выбору пользователя.

Форум

Справочник

Discord чат

Курсы javascript