Iniciar sesiónCerrar
Correo:
Contraseña:
Entrar
Recordar sesión en este navegador
Iniciar sesiónIniciar sesiónCrear cuentaCrear cuenta
LWP » Foros » JQuery » evento click a un frames

JQuery - evento click a un frames

Volver
Nuevo Tema
<<>>
 
Vista:
sin imagen de perfil
Val: 15
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

evento click a un frames

Publicado por informatic (8 intervenciones) el 30/04/2017 06:32:16
Buenas, una consulta, resulta que tengo una lista de iframes de youtube con sus respectivos links, y quiero que al clickear un iframe este desde la pagina1.php me envie a la pagina2.php con su respectivo id. El problema es que no logro capturar los click en un iframe de youtube y no se si con jquery se podra..

pagina1.php
1
2
3
4
5
<div class="contenedor">
	<a href="pagina2.php?id=<?php echo $post['id']; ?>">
		<iframe id="iframe_id" src="https://www.youtube.com/embed/I4dy7MTXXXX" ></iframe>
	</a>
</div>
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 Rafael Angel
Val: 2
Ha disminuido su posición en 6 puestos en JQuery (en relación al último mes)
Gráfica de JQuery

evento click a un frames

Publicado por Rafael Angel (1 intervención) el 30/04/2017 22:31:44
No podras capturar los clicks dentro de un iframe que contiene un url diferente a la de tu pagina.

Lo que si que puedes hacer, es poner una capa encima del iframe para capturar el click... no se si te puede servir...
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 15
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

evento click a un frames

Publicado por informatic (8 intervenciones) el 01/05/2017 06:28:47
Hola Rafael Angel, gracias por tu respuesta, dices como poner una imagen al pasar el mouse por el iframe??? porque hice algo similar poner una imagen al enlace <a> pero no me deja pulsar correctamente, debol pulsar al menos 3 veces click para que pase a la siguiente pagina
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 15
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

evento click a un frames

Publicado por informatic (8 intervenciones) el 05/05/2017 06:57:44
Hola rip, si eso es exactamente lo q necesito
Una consulta para que pueda realizar el ultimo ejemplo que me enviastes debo cargar alguna libreria? a parte de jquery?
porque no logre q me funcione al copiar el codigo.
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de kip
Val: 141
Plata
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

evento click a un frames

Publicado por kip (38 intervenciones) el 06/05/2017 01:51:10
No, ninguna, inclusive puedes hacerlo sin jQuery.

Puedes colocar el codigo que tienes ?
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 15
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

evento click a un frames

Publicado por informatic (8 intervenciones) el 06/05/2017 07:03:42
Hola logre que me muestre el video, pero al presionar el video lo reproduce y no llama a la alerta, este es el codigo

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Prueba iframe</title>
	<script type="text/javascript">
	var tag = document.createElement('script');
 
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
	var player;
 
	function onYouTubeIframeAPIReady() {
   		 player = new YT.Player('player01', {
     		   height: '360',
    		    width: '640',
   	 		    videoId: 'M7lc1UVf-VE',
     		   events: {
     		       'onStateChange': onPlayerStateChange
     		   }
   		 });
		}
 
	function onPlayerStateChange(event) {
   		 if (event.data == 3) {
   		     alert('Redirigiendo..... ' + $('#player01').parent('a').attr('href'));
  	  }
	}
	</script>
</head>
<body>
	<a href="https://google.com" target="_blank">
  		<div id="player01"></div>
	</a>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
Imágen de perfil de kip
Val: 141
Plata
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

evento click a un frames

Publicado por kip (38 intervenciones) el 07/05/2017 21:31:38
Creo que el problema esta porque estas usando funciones de jQuery y no veo que agregues la libreria !

Intentalo asi, sin jQuery:

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
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Prueba iframe</title>
	<script type="text/javascript">
	var tag = document.createElement('script');
 
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
	var player;
 
	function onYouTubeIframeAPIReady() {
   		 player = new YT.Player('player01', {
     		   height: '360',
    		    width: '640',
   	 		    videoId: 'M7lc1UVf-VE',
     		   events: {
     		       'onStateChange': onPlayerStateChange
     		   }
   		 });
		}
 
	function onPlayerStateChange(event) {
   		 if (event.data == 3) {
   		 	var href = document.querySelector('#player01').parentNode.getAttribute('href');
   		     alert('Redirigiendo..... ' + href);
  	  }
	}
	</script>
</head>
<body>
	<a href="https://google.com" target="_blank">
  		<div id="player01"></div>
	</a>
</body>
</html>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
2
Comentar
sin imagen de perfil
Val: 15
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

evento click a un frames

Publicado por informatic (8 intervenciones) el 09/05/2017 05:50:33
Gracias kip, me ha funcionado..cualquier cosa te aviso si necesito algo mas... pero desde ya estoy muy agradecido
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 15
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

evento click a un frames

Publicado por informatic (8 intervenciones) el 15/05/2017 07:47:23
Hola kip, estoy aqui un rato molestandote de nuevo jejejje, quiero saber si me puedes ayudar en lo siguiente, es relacionado con el mismo tema, trate de adaptar los codigos para realizar un tipo de galeria por youtube, Mi problema es que con un div no logro ver más videos si tuviera una lista de 6 videos, solo me mostrara uno.

$foto['id'] = muestra el id guardado en la base de datos
$foto['imagen'] = muestra la url del video

index.view.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
	<section class="fotos">
		<div class="contenedor">
			<?php foreach ($fotos as $foto):?>
				<div class="thumb">
					<a href="foto.php?id=<?php echo $foto['id']; ?>" target="_blank">
						<div id="player01"></div>
                                                // aca para mostrar el video  src="<?php echo $foto['imagen']; ?>"

					</a>
				</div>
			<?php endforeach; ?>
		</div>
	</section>
</body>

index.php

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
<?php
 
require 'funciones.php';
 
$fotos_por_pagina = 2;
 
$pagina_actual = (isset($_GET['p']) ? (int)$_GET['p'] : 1);
$inicio = ($pagina_actual > 1) ? $pagina_actual * $fotos_por_pagina - $fotos_por_pagina :0;
 
$conexion = conexion('galeria_videos','root','');
 
if(!$conexion){
	die();
}
 
$statement = $conexion->prepare("SELECT SQL_CALC_FOUND_ROWS * FROM videos LIMIT $inicio , $fotos_por_pagina");
 
$statement->execute();
$fotos = $statement->fetchAll();
 
if(!$fotos){
	header('Location: index.php');
}
 
$statement = $conexion->prepare("SELECT FOUND_ROWS() AS total_filas");
$statement->execute();
$total_post = $statement->fetch()['total_filas'];
 
$total_paginas = ceil($total_post / $fotos_por_pagina);
 
require 'views/index.view.php';
 
?>

Resulta que no me muestra visualmente todos los videos al estar en un div, solo me muestra el primero. Pero sí en un iframe de esta forma <iframe src="<?php echo $foto['imagen']; ?>" ></iframe>. Al colocarlo en un div puedo acceder al mismo video y verlo en otra pagina ej: foto.php?id=1 sin problemas, pero en un iframe puedo ver todos los videos guardados en la base de datos pero no puedo acceder a uno pinchando el video.
Desde ya muchas gracias, espero me puedas ayudar un saludo
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar
sin imagen de perfil
Val: 15
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

evento click a un frames

Publicado por informatic (8 intervenciones) el 16/05/2017 09:13:17
Se me olvido el script en index.view.php

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
<script type="text/javascript">
 
	var tag = document.createElement('script');
	tag.src = "https://www.youtube.com/iframe_api";
	var firstScriptTag = document.getElementsByTagName('script')[0];
	firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
 
	var player;
 
	function onYouTubeIframeAPIReady() {
		<?php foreach ($fotos as $foto):?>
		var foto = '<?php echo $foto['imagen']; ?>';
		 player = new YT.Player('player01', {
    		   height: '150',
    		    width: '250',
			    videoId: youtube_parser(foto),
    		   events: {
    		       'onStateChange': onPlayerStateChange
    		   }
		 });
		 <?php endforeach; ?>
		}
 
	function onPlayerStateChange(event) {
 
		if (event.data == 3) {
			var href = document.querySelector('#player01').parentNode.getAttribute('href');
		    alert(href);
		    //window.location = href;

		}
	}
 
	function youtube_parser(url){
		var regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#\&\?]*).*/;
		var match = url.match(regExp);
		return (match&&match[7].length==11)? match[7] : false;
	}
 
</script>
Valora esta respuesta
Me gusta: Está respuesta es útil y esta claraNo me gusta: Está respuesta no esta clara o no es útil
0
Comentar