Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JavaScript » Capturar el evento cuando se hace fullscreen en un navegador

JavaScript - Capturar el evento cuando se hace fullscreen en un navegador

Volver
Nuevo Tema
<<>>
 
Vista:
Imágen de perfil de cris

Capturar el evento cuando se hace fullscreen en un navegador

Publicado por cris (11 intervenciones) el 02/11/2015 06:13:28
Buenos noches amigos del foro, quisiera hacerles una consulta sobre programación Javascript en cuanto al tema en particular de capturar el evento que dispara cuando se hace fullscreen en un navegador.

El tema se vincula con HTML5 FullScreen API toggle with JavaScript, mi necesidad en la página web responsive es saber cuándo se hace justamente fullscreen para que no se actualice mí página.

Mi página se actualiza únicamente si cambiamos los tamaños del navegador, pero como sucede en chrome, que oculta automáticamente la barra de dirección y hace fastidiosa la visualización.

Gracias.

pd: Puede estar mi problema resuelto incorporando condiciones en la función cuando se hace referencia a window.innerWidth; window.innerHeight;. Pero quisiera saber mejor como capturar el evento que hace fullscreen.
Valora esta pregunta
Me gusta: Está pregunta es útil y esta claraNo me gusta: Está pregunta no esta clara o no es útil
0
Responder
Imágen de perfil de cris

Capturar el evento cuando se hace fullscreen en un navegador (Solucionado)

Publicado por cris (11 intervenciones) el 03/11/2015 23:43:24
Buenos días amigos del foro, estuve unos días preocupado por este problema que me genera la función fullscreen en cualquier navegador que Oculta la barra de direcciones o refresca la página.

Como yo trabajo en programación canvas y ahora le anexé que sea responsive es decir, si cambia el tamaño del navegador .. el formato de la página se adapta gracias a window.onresize..

La solución encontrada se relaciona con tomar una decisión IF, si cambia solamente el ancho window.innerWidth del navegador, la función actualizaancho() es la que debe ser interactiva mediante el window.onresize.

Cuando hacemos fullscreen (F11) o el navegador como chrome lo hace automáticamente, no debería ser un evento que provoque la reactualización de los canvas .. lo que conllevaría a gestar un efecto de parpadeo que afecta al usuario o lector. (EN MI CASO QUEDABA ASQUEROSO ESE REFRESCO DE TODA LA PAGINA)

Esto se da en programación Responsive.. si no programas tus páginas para que se actualicen no se ve esto.

Por eso estuve investigando Como hacer para que el fullscreen no sea un evento disparador del refresco.. espero se comprenda tranquilamente.

Estuve bastante tiempo viendo como solventar este problema que arrastran los navegadores por ejemplo cuando utilizamos un dispositivo móvil o Tablet, y en pc cuando invocamos al fullscreen.

Suerte!

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
...
	window.onresize = actualizaancho;
 
	function actualizaancho()
		{
			anchopan = window.innerWidth*porancho;
			if (canvas01.width !== anchopan)
			{iniciar();}
		}
 
	function iniciar()
		{
			redraw1();
			redraw2();
		}
...

Ejemplo -> Función javascript que hace de Responsive

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
<script>
window.onload = function()
{
	canvas = document.getElementById('canvas01');
	ctx01 = canvas.getContext('2d');
 
	canvas = document.getElementById('canvas02');
	ctx02 = canvas.getContext('2d');
 
	canvas = document.getElementById('canvas03');
	ctx03 = canvas.getContext('2d');
 
	canvas = document.getElementById('canvas04');
	ctx04 = canvas.getContext('2d');
 
	canvas = document.getElementById('canvas05');
	ctx05 = canvas.getContext('2d');
 
	canvas = document.getElementById('canvas06');
	ctx06 = canvas.getContext('2d');
 
	canvas = document.getElementById('canvas07');
	ctx07 = canvas.getContext('2d');
 
	canvas = document.getElementById('canvas08');
	ctx08 = canvas.getContext('2d');
 
	iniciar();
	window.onresize = actualizaancho;
 
	function actualizaancho()
	{
		anchopan = window.innerWidth*porancho;
		if (canvas01.width !== anchopan)
		{iniciar();}
	}
 
	function iniciar()
	{
		redraw1();
		redraw2();
	}
 
	function redraw1()
	{
		canvas01.width = window.innerWidth*porancho;
		canvas01.Height = window.innerHeight*poralto;
		canvas02.width = window.innerWidth*porancho;
		canvas02.Height = window.innerHeight*poralto;
		canvas03.width = window.innerWidth*porancho;
		canvas03.Height = window.innerHeight*poralto;
		canvas04.width = window.innerWidth*porancho;
		canvas04.Height = window.innerHeight*poralto;
		canvas05.width = window.innerWidth*porancho;
		canvas05.Height = window.innerHeight*poralto;
		canvas06.width = window.innerWidth*porancho;
		canvas06.Height = window.innerHeight*poralto;
		canvas07.width = window.innerWidth*porancho;
		canvas07.Height = window.innerHeight*poralto;
		canvas08.width = window.innerWidth*porancho;
		canvas08.Height = window.innerHeight*poralto;
	}
 
	function redraw2()
	{
 
		var img01 = new Image();
		img01.src = "../images/fotografias.png";
		img01.onload = function()
		{
			ctx01.drawImage(img01,0,0,window.innerWidth*porancho,70);
		}
 
		var img02 = new Image();
		img02.src = "../images/texturatitulos.png";
		img02.onload = function()
		{
			ctx02.drawImage(img02,0,0,window.innerWidth*porancho,60);
		}
 
		var img04 = new Image();
		img04.src = "../images/texturacontrol.png";
		img04.onload = function()
		{
			ctx04.drawImage(img04,0,0,window.innerWidth*porancho,60);
		}
 
		var img05 = new Image();
		img05.src = "../mages/texturatitulos.png";
		img05.onload = function()
		{
			ctx05.drawImage(img05,0,0,window.innerWidth*porancho,60);
		}
 
		var img07 = new Image();
		img07.src = "../images/texturacontrol.png";
		img07.onload = function()
		{
			ctx07.drawImage(img07,0,0,window.innerWidth*porancho,60);
		}
 
		var img08 = new Image();
		img08.src = "../images/rosemagicfondo.png";
		img08.onload = function()
		{
			ctx08.drawImage(img08,0,0,window.innerWidth*porancho,140);
		}
 
		alturaimg = window.innerWidth*0.24;
		esctexto(nropag, seccion, alturaimg, window.innerWidth*porancho, window.innerHeight);
 
		var img06 = new Image();
		img06.src = "../images/abstracto.png";
		img06.onload = function()
		{
			canvas06.height = 0;
		}
 
	}
}
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar
Imágen de perfil de xve
Val: 3.162
Oro
Ha mantenido su posición en JavaScript (en relación al último mes)
Gráfica de JavaScript

Capturar el evento cuando se hace fullscreen en un navegador (Solucionado)

Publicado por xve (2100 intervenciones) el 04/11/2015 08:31:16
Muy bueno Cris!!! gracias por compartirlo!!!
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
1
Comentar