Código de JQuery - Introducir un url y habilitar un botón que abra dicha página

Imágen de perfil
Val: 393
Oro
Ha mantenido su posición en JQuery (en relación al último mes)
Gráfica de JQuery

Introducir un url y habilitar un botón que abra dicha páginagráfica de visualizaciones


JQuery

Publicado el 28 de Diciembre del 2015 por Xve (285 códigos)
2.245 visualizaciones desde el 28 de Diciembre del 2015
Este simple código, muestra como permite añadir varias direcciones de Internet en diferentes cuadros de texto, y habilita un botón para abrir dicha página si la dirección es correcta.

habilitar-boton-al-introducir-una-direccion-de-internet

Versión 1.0
estrellaestrellaestrellaestrellaestrella(1)

Publicado el 28 de Diciembre del 2015gráfica de visualizaciones de la versión: Versión 1.0
2.246 visualizaciones desde el 28 de Diciembre del 2015
estrellaestrellaestrellaestrellaestrella
estrellaestrellaestrellaestrella
estrellaestrellaestrella
estrellaestrella
estrella

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
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<script src="http://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js" type="text/javascript"></script>
 
	<style>
	#enlaces>div {padding:5px;}
	#enlaces span {display:inline-block;width:200px;}
	</style>
 
	<script>
	$(document).ready(function(){
		$("#enlaces input[type=text]").keyup(function(){
 
			// si disponde contenido y la url es correcta
			if($(this).val().length && isValidUrl($(this).val(),1,1))
			{
				// habilitamos el botón
				$(this).next("input[type=button]").prop('disabled', false);
			}else{
				// deshabilitamos el boton
				$(this).next("input[type=button]").prop('disabled', true);
			}
		});
 
		$("#enlaces input[type=button]").click(function(){
			// abrimos la pagina
			window.open($(this).prev("input[type=text]").val());
		});
	});
 
	// Esta función ha sido copiada de:
	// http://www.lawebdelprogramador.com/codigo/JavaScript/2360-funcion-para-validar-si-una-url-es-correcta.html
	/**
	 * Tiene que recibir:
	 *  - la url a revisar
	 *  - indicar si es obligatorio [1|0]. Si es obligatorio, devuelve
	 *    false si la url esta vacia
	 *  - indicar si validamos que la direccion pueda ser de un servidor
	 *    ftp [1|0]
	 * Devuelve True o False
	 */
	function isValidUrl(url,obligatory,ftp)
	{
		// Si no se especifica el paramatro "obligatory", interpretamos
		// que no es obligatorio
		if(obligatory==undefined)
			obligatory=0;
		// Si no se especifica el parametro "ftp", interpretamos que la
		// direccion no puede ser una direccion a un servidor ftp
		if(ftp==undefined)
			ftp=0;
 
		if(url=="" && obligatory==0)
			return true;
 
		if(ftp)
			var pattern = /^(http|https|ftp)\:\/\/[a-z0-9\.-]+\.[a-z]{2,4}/gi;
		else
			var pattern = /^(http|https)\:\/\/[a-z0-9\.-]+\.[a-z]{2,4}/gi;
 
		if(url.match(pattern))
			return true;
		else
			return false;
	}
	</script>
</head>
 
<body>
 
<div id="enlaces">
	<div><span>Indica la url de Facebook:</span> <input type="text" name="url"> <input type="button" id="boton" value="abrir la página" disabled></div>
	<div><span>Indica la url de Twiter:</span> <input type="text" name="url"> <input type="button" id="boton" value="abrir la página" disabled></div>
	<div><span>Indica la url de Instagram:</span> <input type="text" name="url"> <input type="button" id="boton" value="abrir la página" disabled></div>
</div>
 
</body>
</html>



Comentarios sobre la versión: Versión 1.0 (1)

Imágen de perfil
10 de Enero del 2016
estrellaestrellaestrellaestrellaestrella
Excelente Jquery .... me interesa mucho .
Yo quiero poner en mi pàgina web un botòn que diga "Youtube" y que el usuario al presionar el botòn se abrar un pop up o un iframe con "Youtube" por ejemplo...Asì puede ver youtube desde mi pàgina sin abrir una nueva pestaña en su buscador.
Encontrè Fancybox y abre bien todo lo que sea pàginas web "http" pero no abre las "https"seguras...
como puedo abrir en un iframe bonito o en un pop up "https://www.youtube.com/" ?
Gracias x la Ayuda D
Responder

Comentar la versión: Versión 1.0

Nombre
Correo (no se visualiza en la web)
Valoración
Comentarios...
CerrarCerrar
CerrarCerrar
Cerrar

Tienes que ser un usuario registrado para poder insertar imágenes, archivos y/o videos.

Puedes registrarte o validarte desde aquí.

Codigo
Negrita
Subrayado
Tachado
Cursiva
Insertar enlace
Imagen externa
Emoticon
Tabular
Centrar
Titulo
Linea
Disminuir
Aumentar
Vista preliminar
sonreir
dientes
lengua
guiño
enfadado
confundido
llorar
avergonzado
sorprendido
triste
sol
estrella
jarra
camara
taza de cafe
email
beso
bombilla
amor
mal
bien
Es necesario revisar y aceptar las políticas de privacidad

http://lwp-l.com/s3390