Muchas veces necesitamos saber como ocultar la URL, o enmascarar una URL para que la misma no se visualice en la barra de direcciones.
Si bien esto puede realizarce por medio del cPanel o Panel de Control de nuestro servicio de hosting, tambien podemos ocultar la url por medio de la combinacion de un simple código HTML y CSS.
Muchas veces es recomendable ocultar la URL real de nuestro sitio, por fines estéticos o de marketing, permitiendo a nuestros usuarios ver otra dirección URL.
También puedes incluir una página dentro de otra, sin que el usuario lo note.
Con este truco podrás realizarlo tantas veces como desees.
Se trata de utilizar la etiqueta <iframe> con algunas modificaciones, y con el agregado de algunas propiedades CSS.
CASO DE EJEMPLO:
Supongamos que tu quieres que el usuario ingrese a tu sitio, por ejemplo http://www.tudominio.com/ , pero que vea el contenido de otra URL.
Al ingresar a tu sitio, por defecto tu sitio web mostraría el contenido del archivo index.html (ó index.php, ó index.asp, dependiendo del lenguaje) , por lo tanto trabajaremos sobre el archivo: http://www.tudominio.com/index.html
Digamos que tu NO quieres mostrar el contenido de ese archivo, sino que quieres que el usuario vea por ejemplo otra página que se encuentra en http://www.tudominio.com/home.html (o incluso puedes desear que vea una URL externa a tu sitio), pero que en su barra de direcciones siga viendo http://www.tudominio.com/
INSTRUCCIONES PARA OCULTAR LA URL:
Pues bien, entonces lo que debes hacer para ocultar la url, es lo siguiente:
En el archivo http://www.tudominio.com/index.html debes insertar un iframe.
Para esto debes usar la etiqueta <iframe> que tiene la siguiente sintaxis:
[sourcecode language=’html’]
[/sourcecode]
Donde «xxxxxxxxx.html» debes reemplazarlo por la URL que quieres insertar y que será la que contendrá el contenido real que se moestrará, en este caso dijimos que seria http://www.tudominio.com/home.html
Entonces, dentro de http://www.tudominio.com/index.html, y luego de la etiqueta <body> debes colocar:
[sourcecode language=’html’]
[/sourcecode]
Con esto insertamos la «ventana» (iframe) por donde mostraremos el contenido del archivo home.html.
Y también dentro de http://www.tudominio.com/index.html, antes de la etiqueta de cierre </header> debes colocar el siguiente codigo CSS:
[sourcecode language=’css’]
[/sourcecode]
Con este codigo CSS, le decimos que la «ventana» del <iframe> la lleve al mismo tamaño del navedador (máximo de alto y ancho).
Entonces cuando vayamos al URL http://www.tudominio.com/ (que es el que contiene el iframe), nos mostrará realmente el contenido del URL http://www.tudominio.com/home.html.
Código final y completo
Archivo http://www.tudominio.com/index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Documento sin título</title>
<style type="text/css">
html, body, div, iframe {
margin:0;
padding:0;
height:100%;
}
iframe {
display:block;
width:100%;
border:none; }
</style>
</head>
<body>
<iframe src="http://www.tudominio.com/home.html"></iframe>
</body>
</html>
Y asi ocultaremos la URL real (http://www.tudominio.com/home.html).
Saludos y espero te sea de gran utilidad !!
Cristian
*** ¿ Te gustó este recurso ?
Imagina todo lo que puedes aprender con el Curso Completo de Maquetación Web en Video.
Mira todos los detalles AQUI !
No esta bien explicado, ya intente muchas formas y simplemente no sale.
Me gustaría ver un ejemplo para poderlo comparar o que pusieras todo el código.
Hola Daniel
Acabo de agregar al final del post, el código completo.
🙂
Saludos!
Cristian
Confirmame si has podido hacerlo, Daniel.
🙂
Hace años que este tip da vueltas por internet y siempre sigue vigente.
Gracias por recordárnoslo.
Saludos
Estoy tratando de ingresar tu codigo ya que estoy tratando de hacer un ingreso con codigo a una pagina de mi web y busco que la pagina que quiero ingresar no se vea pero no puedo el codigo que das tine algo mal y no se que es, si me puedes dar una mano.-
Gracias
Hola Juan
El codigo esta bien.
Copia el el codigo que puse al final y reemplaza por tus datos.
Tiene que funcionar.
Sino pasa aqui tus datos y lo vemos.
Saludos!
Cristian
Simple y útil, se agradece mucho me sirvió para lo que necesitaba
saludos
Genial.
Saludos Juan!!!
Donde puedo encontrar el codigo completa, ya que no me resulta con el primero q pusiste
saludos 😉
Hola Miguel
El codigo funciona.
Copia el ultimo que puse y reemplaza por tus datos.
Saludos!
Cristian
Hola disculpa y como le ago para que oculte cuando ago alguna consulta algo asi
http://localhost:8080/Banco/consultarUnUsuario?idUsuario=1
y qusiera que no aparesca el id para que no puedann inyectar codigo
Muy interesante, seguro que lo implementare, muchas gracias amigos
Hola cristian, se puede hacer esto en el Filezilla? , la verdad no se nada de programacion y me comentaron que copiando este codigo en un archivo php se me redirecionaria a otra pagina, pero el problema es que se redirecciona, pero sale la nueva url y se borra mi dominio inicial. Agradecere mucho tu ayuda
Hola Jorge
Este codigo es para enmascarar una direccion URL dentro de otra, es decir, para ocultar una determinada direccion URL.
No se a que te refieres con el Filezilla. Ese soft es para subir a bajar archivos desde un servidor.
Saludos
Cristian
Ajudou muito. Simples e útil.
Obrigado amigo!
Me ha servido de mucha ayuda este articulo, puesto qeu en mi pagina web tenia algunos problemas similares con las URL, y las consegui ocultar sin problemas.
Gracias por vuestros consejos
lo que no entiendo es que:
tendré que tener una pagina auxiliar por cada pagina que quiera ocultar su direccion? :S
Claro, si lo haces de esta forma, deberas enmascarar cada pagina con otra pagina.
Saludos!
con ie 8 no funka… entra en un loop y comienza a cargar y cargar y se muere… en chrome demora y sale un msg que no cargo el plugin… ni siquiera la carga … solo firefox la interpreta correctamente, y la carga bien… pero todos los usuarios no usan firefox…
alguna idea…? tengo mi pagina en wix y tengo mi dominio… desde mi hosting quiero mostrar la pagina de wix pero con la url de mi dominio… como dije con firefox funciona la raja… pero no todos usan firefox….
Alberto
Lo acabo de probar en Firefox, Chrome, IE7 y Safari y funciona en todos perfecto.
Por favor vuelve a compiar el ultimo codigo que puse aqui en el articulo y reemplaza por tus URLs.
Deberia funcionar perfecto.
Saludos
Cristian
ola que tal no se si aun estaras vivo xD pero yo tengo hecho una copia de mi web en un archivo de bloc nota podre poner ese codigo ahi ???
Hola Ciro
No comprendo bien tu consulta.
Cristian
Hola que tal soy novato en este y quiciera saber donde copiar ese codigo……….gracias
Jhonny
El codigo va dentro del BODY de tu documento.
Basicamente es 1 sola linea: la del IFRAME.
Saludos
Cristian
mucha gracias , me sirvió mucho el código , funciona perfecto!!!!!!!!!!!!!!!!
Hola,
mi duda es… con esto no la enmascaras haces al usuario interesado en coger el vídeo que tenga que ir a la pagina del iframe, no es cierto?
espero respuesta graciass 😀
Hola «Serhumano»
Con esta opcion SI enmascaras la URL destino, evitando que el usuario la vea.
Saludos
Cristian
Hola de nuevo, pero si el usuario accede a a la url de tu iframe verá la url en cuestión que yo quiero esconder, no es así?
Claro, si el usuario tiene conocimientos de programacion HTML , accede al codigo, busca la etiqueta IFRAME, alli ver la URL de destino.
Muchas gracias compañero… era lo que estaba buscando..
Buen tutorial….
Hola cristian, te hago una consulta, si me hechas una mano me harías tan feliz!!! 😀
tengo un iframe cultando la url de mi sitio, pero no me genera las imagenes en miniatura de la url original (por ejemplo cuando pego la url en facebook para compartir) hay alguna manera de resolver eso???? gracias miles hermano!
mxor.
La URL relativa de un iframe, es la del mismo iframe y no la del frame principal que lo contiene.
Por lo que es probable que Facebook no te tome las imagenes.
Pero chequea bien el codigo de insercion de facebook que alli creo se puede modificar y hacer pruebas para que se vea la imagen.
Saludos!
Buenos días,
me pasa que se me duplica la web…. ahora tengo una encima de la otra.
http://www.paniaguaphoto.com
que raro… que ha pasado?
MArco
Yo veo la web perfectamente enmascarada.
Cristian
Buenos días.
Es muy bueno este código, me ha sido de gran utilidad en varias ocasiones.
Sólo tengo una duda.
Si yo utilizo este FRAME para mostrar en MI DOMINIO una Web completamente externa y son muchos los usuarios que ingresan a esa Web simultaneamente, los recursos por consultar esa otra Web afectan en algo al servidor donde tengo hospedado MI dominio.
Es decir, el uso de recursos pega en algo a mi servidor? o para el es transparente y todo el trafico que se pueda generar por descargas de archivos, consultas a la base de datos, etc, le afecta sólo al server que contenga la página externa.
Espero su respuesta.
Gracias de antemano.
Gracias Javier.
La carga de trafico, recae en el servidor de la pagina externa.
Saludos!
Cristian
Hola Cristian, tu ejemplo esta muy bien pero tiene un problema que yo no consigo resolver, diponemos de un producto online que revendemos como marca blanca, por lo tanto nuestro cliente utiliza nuestro producto online desde su propio servidor cargandolo mediante un iframe. de manera que sus clientes no ven nuestra direccion web si no que ven la direccion de nuestro cliente, hasta aqui bien, pero cuando uno de los clientes de nuestro cliente se dispone a descargar algun archivo o pdf disponible desde nuestro producto, en la barra de estado de los navergadores aparece la direccion original desde donde se esta descargado el pdf o archivo, por lo tanto el enmascaramiento no es del 100% y no hay solucion alguna. y no hablo de esconder los enlaces que se que se puede, si no de la direccion que aparece cuando se muestra el porcentaje de progreso de la descarga en la barra de estado del navegador, que es la direccion original del servidor aunque estemos viendo dicha direcciona desde otra direccion mediante un iframe. Si teines una solucion a esto agradeceria que la explicaras
Un saludo
Javier
Con esta tecnica no se pueden enmascarar direccion de downloads como lo quieren hacer uds.
Para eso deberias buscar la solucion en downloads basados en Javascript o jQuery
(hay varios ya pre armados, buscalos en Google)
Saludos!
Exelente Código me fue muy útil.
Buenas Cristian, este tema es viejo pero he visto que aún sigues respondiendo dudas, espero puedas aclarar la mía.
Creo que a muchos les ayudará esta pregunta. Mi punto es que no sé donde colocar todo ese código, he visto que has respondido ‘en el body’ o algo así, sigo sin entender, ese código se sobreescribe ¿donde? ¿en un programa? ¿en la misma barra de dirección? ¿dentro de una página? sé mas específico por favor u.u
¡Muchas gracias!
El código lo colocas dentro del código html de la página.
Tienes conocimientos de html?
Sino busca aquí en el blog que hay mucha información.
Saludos!
Hola Cristian,
Yo uso Blogger, no sé si lo conozcas, creo que si, en fin, mi pregunta es que mi blog tiene un dominio propio, y quiero crear una sección (Entrada o página) donde aparezca el iframe ocupando el 100% de la pantalla, de paso ocultando mi blog, el titulo, el estilo, los widget, todo, pero lo que pasa es que creo que en ese caso se debe usar un script (creo), por que le pongo al iframe (dentro de la entrada del blog) medidas de 100% y ocupa el 100% de la sección (osea de la entrada) pero el resto de mi blog se sigue viendo.
¿Hay una manera de colocar el iframe en una entrada y que al acceder a ella el iframe ocupe el 100% de la pantalla del navegador? y que de esa manera sigan en mi blog pero con la URL dentro del iframe.
Muchas gracias!
Hola Joan
Si conozco Blogger.
El ejemplo que aquí doy es para aplicar a una pagina de un sitio y no para insertar en un blog ya que cuando insertas este código dentro de una entrada o pagina, antes de este código el blog inserta su propio codigo (parte del template) y eso hace que no funcione el ejemplo del iframe.
Saludos!
AL enmascarar las url, afectará a SEO?
Me refiero si el bot busca http://www.tudominio.com/index-html y no lo encuentra porque ve la url como: http://www.tudominio.com/home, y la primera url tenía buen posicionamiento en los buscadores, en el resultado tirará un 404?
Si es positivo, necesariamente tengo que hacer un redireccionamiento 301 a todas las urls afectadas por el enmascaramiento?
Hola Cristian. A ver si puedo explicarte mi problema. Me he incorporado a un distribuidor que me ofrede su tienda online (parametrizada). El caso es que lo que aparece es SU URL, y yo quiero entrar en MI URL (si entro en su tienda, lo que aparecen son códigos en el querystring que me identifican, pero nada de mi dirección.
Me ofrecen un iframe como el que tú propones, la solución es aparente, pero me pierdo toda la navegación que se produce dentro del frame (mi url permanece estática conteniendo el iframe gordo).
Estoy buscando alguna solución que sustituya SU url raiz por la mía… (disculpa, no uso lenguaje muy técnico) es decir, si su url fuera http://www.proveedor.com/usuario=27&producto33, (es mucho más larga), yo busco llamar al iframe con esta url: http://www.mitienda.com/usuario27&producto=33, y que el iframe de dentro lo sustituya por http://www.proveedor.com y me muestre correctamente el producto.
Es la única forma que tengo que, por ejemplo, mandar un correo a un cliente con el producto que le interesa (y mi url)…
¿hay forma de hacerlo? ¿se te ocurre cómo?
Hola Antonio
Comprendo perfectamente la situacion.
Para eso puede usar el archivo .htaccess y utilizar «RewriteRule» para re-escribir las URL tal como se hace para crear las famosas URLs amigables (URL friendly)
Es un tema untanto complejo, veré si escribo un articulo al respecto.
Sino puedes buscar en Google el manejo del archivo .htaccess.
Saludos!
Cristian
Hola, he visto que en algunas Web ocultan la URL del servidor. Es decir, si coloco http://www.thuer.com.ar/cpanel me dirige a http://www.thuer.com.ar:2082/
Pero en otras si coloco http://www.misitioweb.com/cpanel me digire a https://gator8725.hostgator.com:2083/ revelando mi servidor.
Como puedo hacer que se oculte la url de mi servidor con el nombre de mi dominio?
Juan
Fikate lo que le respondi a Antonio en estos mismos comentarios.
Asi lo podrías hacer.
Saludos!
hola cristian necesito ayuda casi no manejo html tengo mi dominio y yo hice mi web con wix gratis entonces el nevgador aparece la redirrecion a wix como puedo oculta esa parte de que se vea mi dominio y no el de wix visita mi web sifondecerveza.com.ve y veras lo que te digo de la direccion todo lo he ehcho viendo en google y youtube no tengo cursos ni nada sobre webmaster
Gerardo
Debes seguir este tutorial y lo podras hacer.
Tu dominio sifondecerveza.com.ve no debes redireccionar a ningún lado.
En tu dominio colocas en index.html como explico aqui, y en el IFRAME poner la url de tu sitio en Wix.
Debería funcionar.
Saludos!
Cristian
no se creo que estoy colocando algo que no es ayudaaaaaa
sifon de cerveza
html, body, div, iframe {
margin:0;
padding:0;
height:100%;
}
iframe {
display:block;
width:100%;
border:none; }
cristian probando y probando lo logre no se que hice pero funciona el codigo
Genial Gerardo!
muchas gracias me a ayudado mucho. sinceramente no te entendí claramente al principio, soy algo torpe para aprender jajaja. en fin luego comprendí que la url que se vería reflejada desde la pagina es la que se creo con tu codigo. muchas gracias me has ayudado mucho.
Hola Cristian, quiero darte las gracias por que gracias a ti he resuelto un problema que hace tiempo quería resolverlo, de nuevo muchas gracias y saludos.
Por nada Enrique!
Buenas tardes Cristian, podrias ayudarme con un problema que tengo..??
Si Pedro dime….
cristian pero cuando lo pongo en mi web se ve pequeño
Omar
Verifica las medidas del iframe en el codigo.
Sino enviame la url asi lo veo.
Saludos!
saludos cristian me gustaría saber si esto puede servir para publicar sin que fb detecte mi url y si no funciona quería saber si tienes algun método para evadir el vaneo de los dominios en fb …
gracias !!!
Lasaro
Para ese caso no te serviría, FB lo detecta igual.
Saludos!
Hola ojala m puedas guiar un poco sobre lo q kiero hacer.
La cuestion es q tngo un sitio y kiero crear algun codigo para por si me blokean la url original del sitio poder entrar por otra url.
Gracias de antemano
HOLA COMO ESTAS ME FUNCIONO PERFECTAMENTE , LO ÚNICO QUE CADA VEZ QUE HABRO VARIAS PAGINAS SE ME ABREN VARIAS PAGINAS , POR QUE ?
Saludos, y qué código habría que incorporar si quiero cambiar el iframe todos los meses pero quiero que se haga automáticamente. Digamos que es un iframe dinámico. Te pongo un ejemplo, quiero que en el iframe se visone una pagina que contine una newsletter que cambia todos los meses. La ruta sería http://www.dominio.com/newsletter/2016-01-01/index.html. Lo que va cambiando todos los meses es la carpeta con la fecha (año-mes-día). Gracias
No te queda otra que cambiar el Path todos los meses.
Hola Cristian, no sé si es muy antiguo este tip pero ahora yo lo probé y funciona. El problema se presenta posteriormente ya que queda «enganchado» por así decirlo al iframe. Hay alguna rutina como para volver al estado anterior (desactivarlo) de su activación. Gracias por tus aportes.
Hola hermano, todo bien gracias por el codigo., lo probé y fino, pero tengo un detalle, resulta que la aplicacion que estoy tratando de insertar es responsiva, y en el navegador cuando le pongo la vista adaptable se ve bien, pero en el móvil, se ve puequeñito todo, algo asi como si a un screenshot lo encogemos desde la esquinita… queria saber que puedo hacer, si se te ocurre algo, .. lo estoy ocupando porque tengo el siguiente probema, tengo la app alojada en mi servidor y debe estar apuntando a otro manteniendo la url.
Hola cristian, lo que sucede que esto es tambien para que el trafico que se ve en una web, se replique a otra web sin necesidad de que el usuario lo vea, pero aquí un problema cuando pongo el css en mi blog donde pongo el iframe se descruadra totalmente, al parecer el html, body, div agarran el css de este iframe por eso que sucede tal cosa. Alguna sugerencia para solucionar el problema.
EL problema de esto es que la url que redireccionas dentro del iframe se maneja como una pagina independiente por lo tanto tendrás que volver a setear todos los archivos css y js, de lo contrario no reconocerá los css de esa pagina
Muy bueno, funciona perfecto, gracias!! solo le agregaria el meta viewport al head para que funcione con webs responsive
Si claro, gracias por el aporte Antonio.
¡Hola! ¿Me contáis cómo va lo de la etiqueta meta viewport? Tengo una web con una redirección frame pero, al acceder por la URL redireccionada, no funciona la configuración responsive. Y eso es un gran fail. ¿Hay solución?
La etiqueta meta viewport es para indicarle al dispositivo que permita escalar. o no, nuestro sitio cuando se visualice.
Ayuda a definir el ancho, alto y escala del área usada por el navegador para mostrar contenido.
Todo perfecto salvo una cosa….. El iframe genera un scroll en todas las páginas…como quitar el scroll?? Es decir, no se ve igual la pagina accediendo por el iframe creado, que por la URL original. Al entrar por iframe, me crea un scroll en todas las paginas. Solucion??
me gusta esto gracias
muy buena la inf
Gracias!
Disculpen. Cual sería la utilidad si de todas formas dando click derecho puede ver la URL que se está utilizando?
Porque como medida de seguridad no sirve. Para SEO tampoco.
Lo digo por si alguien piensa que de esta manera no se puede saber que es lo que se está pasando por querystring…
Hola Fernando.
Aclaro que esta utilidad NO es una medida de seguridad, es solo algo «estético» para enmascarar simplemente una URL.
Lo que dices es cierto con click derecho se podría saber la URL, pero eso requiere de un nivel conocimiento para poder hacerlo, la mayoría de la personas no tienen conocimientos sobre como hacer esto.
De hecho, con el inspector de código del navegador podrías verlo fácilmente, por eso aclaro que esto es una utilidad y NO una medida de seguridad.
saludos!
Hola, Cristian:
Te cuento la duda que tengo yo. En mi web (WordPress, Divi) tengo una imagen colocada con un html con un enlace que se abre en un popup, que me lleva a un dominio que me proporciona un servidor externo de un reproductor de radio, que es: http://player.egostreaming.com/clients/EU-8110vu0cpbujlojzzCV/
Sin embargo, como es un enlace largo y feo, he creado el subdominio player.love-radio.es y lo he redirigido hacia ese otro player.egostreaming… pero desde mi cpanel no me deja enmasacararlo para ocultarlo.
Entonces, al no ser la página index la que quiero ocultar, sino un popup de un enlace externo, ¿cómo debería hacerlo? Debo añadir el iframe al código html de la imagen con popup?
Saludos y gracias de antemano.
Cristian muy buen post es lo que estaba buscando! ahora, no soy programador y mucho menos se escribir un código, solo que quiero hacer exactamente lo que describir, poner una web que es un subdominio dentro de una web que es mi dominio, para esto mi primer pregunta es; tengo que tener un hosting propio verdad? como se ve afectado el trafico y la velocidad de carga de la pagina y por ultimo, quisiera saber si podes hacer el trabajo y te lo pago, trabajo con workana y podemos contratar y pagar por ahí.
Espero tu respuesta, muchas gracias!
Buen dia he probado el codigo y funciona muy bien el unico inconveniente es que cuando le doy F5 la pagina vuelve hacian donde empezo, para evitar eso que podria hacer
Como que vuelve a donde empezo?? Siempre deberia mostrarte lo mismo, lo que esta en el iframe.
hola que tal, yo estoy haciendo una practica escolar en un localhost usando xammp.
usando una red local puedo acceder a la carpeta donde tengo los HTML que componen el sitio escribiendo 192.168.0.30/inicio.html, allí tengo varios vínculos que me situan en otras carpetas y entonces la barra de direcciones me muestra la ruta completa (192.168.0.30/HTML/mostrador/diseño/mesas/galería.html) del lugar en el que me encuentro
lo que yo quiero es que sin importar en que lugar del árbol de carpetas me encuentre, el navegador solo diga 192.168.0.30/practicafinal.html
Hola Cristian, espero que me puedas orientar, tengo en mi web una entrada que solía traerme buen tráfico, pero desde hace algunas semanas dejó de hacerlo y al revisar en google me di cuenta que dicho post aparece con la url de otro dominio y al dar clic, redirecciona a una página diferente a la de mi sitio web, no obstante en el buscador aparece con el título y el extracto de mi entrada.
Desconozco cómo solucionar esto. Ya revisé en whois y obtuve el correo del propietario y ya le escribí solicitando amablemente que retire sea lo que sea que haya hecho para robarme mi entrada. Creo que lo puedo reportar a google, pero aún no se cómo.
¿Sabes si hay algo que yo pueda hacer directamente para quitarme a esta lacra de encima?
Desde ya muchas gracias por tu atención y posible ayuda.
Saludos y felicidades por tu artículo.
Hola Plinio
Si el post con la URL de esa persona aparece en Google, es porque lo indexó naturalmente. Mucho no puedes haces.
Si el post es una copia idéntica al tuyo, yo me contactaría con la persona y le diría que al menos coloque al final del articulo la fuente de donde sacó dicha info (o sea tu post) y un link «vivo» hacia el mismo.
Saludos!
hola cristian saludos de venezuela , disculpa no entendi muy bien en que archivo coloco ese codigo? yo uso un cms llamado xenforo donde hubico el archivo para colocarlo gracias
Alberto
Esto no aplica para CMS’s porque suelen manejar un sistema de armado dinamico de HTML.
saludos!
buen post, sabes si hay forma de que si escriben directamente la url del sitio del iframe, este redirija a la entrada principal (con el index)
Gracias. Si claro, si alguien escribe la URL del iframe, va a la entrada directo. Saludos!
Buenas tardes, como se haría para que fuera responsivo? es que al verlo en móvil no se adapta.
Quedo atento tus comentarios
Tenes que usar CSS y las mediaqueries!
Este es el código que tengo y en algunos dispositivos se ve bien en otros no se hace responsivo, me podrías echar una mano a ver si tengo algo mal, gracias.
Titulo.
html, body, div, iframe {
margin:0;
padding:0;
height:100%;
}
iframe {
display:block;
scroll:no;
width:100%;
border:none;
frameborder:0;
allowfullscreen;
}
.container {
width:100%;
height:100%;
margin:0px auto;
font-size:1em;
position:relative;
overflow:hidden;
}
/* para 1200px o menos */
@media screen and (max-width:1280px)and (min-width:800px) {
.container {
width:100%;
height:100%;
margin:0px auto;
font-size:1em;
position:relative;
overflow:hidden;
}
/* para 960px o menos */
@media screen and (max-width:640px)and (min-width:360px) {
.container {
width:100%;
height:100%;
margin:0px auto;
font-size:1em;
position:relative;
overflow:hidden;
}
}
/* para 800px o menos */
@media screen and (max-width:732px)and (min-width:412px) {
.container{
width:100%;
height:100%;
margin:0px auto;
font-size:1em;
position:relative;
overflow:hidden;
}
}
/* para 600px o menos */
@media screen and (max-width:568px)and (min-width:320px) {
.container{
width:100%;
height:100%;
margin:0px auto;
font-size:1em;
position:relative;
overflow:hidden;
}
/* para 480px o menos */
@media screen and (max-width:667px)and (min-width:375px) {
.container{
width:100%;
height:100%;
margin:0px auto;
font-size:1em;
position:relative;
overflow:hidden;
}
}
/* para 320px o menos */
@media screen and (max-width:736px) and (min-width:414px) {
.container{
width:100%;
height:100%;
margin:0px auto;
font-size:1em;
position:relative;
overflow:hidden;
}
/* para 240px o menos */
@media screen and (max-width:1024px) and (min-width:768px{
.container{
width:100%;
height:100%;
margin:0px auto;
font-size:1em;
position:relative;
overflow:hidden;
}
/* para 240px o menos */
@media screen and (max-width:1366px) and (min-width:1024px{
.container{
width:100%;
height:100%;
margin:0px auto;
font-size:1em;
position:relative;
overflow:hidden;
}
Hola, tenes que chechear las mediaqueries porque hay algunas mal.
Por ejemplo:
para 960px o menos */
@media screen and (max-width:640px)and (min-width:360px)
Si fuera para 960 o menos, deberia decir «max-width:960px»
El «max-width» indica la resolucion maxima a la que se aplicaran esas propiedades CSS. (incluyendo todas las inferiores)
El «min-width» indica la resolucion minimi a las que se aplicaarn esas propiedades CSS.
Revisalas porque estan mal.
de casualidad sigue vigente el codigo???
el codigo va en un nuevo .html?
osea creo index.html pongo el codigo
y en el codigo remplazo ejemplo dado.html por mi index ejemplo index.php ejemplo conservando el archivo??
Hola Cristian!!! es de muchísima ayuda tu post y veo que pasan los años y sigue vigente!!! Que bueno!!!!
quiero hacerte una consulta, tal vez me puedas ayudar:
Estoy creando una página de «gracias» desde donde se podrían descargar el producto. Ahora bien, por cuestiones de seguridad, ¿cómo puedo hacer para que eso solamente se pueda descargar una sola vez por usuario?, de hecho no es necesario que se registren en mi página para poder hacerlo. O sea, el usuario compra el producto y es redirigido a la página de Gracias y de allí hace click en el link de descarga, (cuya función la tengo en un php) y automáticamente descarga el producto. Peeeeeero eso no quita que mi buen amigo se pase el link de descarga a otro y pueda hacer lo mismo… no sé si me explico…
Ojalá me puedas ayudar..
Saludos y gracias!!
Hola Romi , entiendo.
Bueno hay varias formas:
– Usando cookies: cuando el usuario entra por primera vez le dejas una cookie. La desventaja es que las cookies vences y que algunos usuarios las desactivan en los navegadoez.
– Usar algun sistema de registro que solo la persona que esta registrada y logueada pueda acceder a esa pagina.
– Restringir el acceso a la pagina por medio de los IPs usando PHP. No es seguro porque los IPs cambian.
Saludos!
Hola Cristian. Después de mucho buscar y probar algunos consejos de otras personas, aún sigo sin encontrar la solución a mi problema. Con esto he llegado a tu página con la esperanza que me puedas ayudar. Lo que necesito es que cuando los visitantes a mi página hagan click en el botón «Ver ejemplos» se abra una ventana nueva con un link externo, pero no quiero que se vea la página de este link externo. ¿Se puede hacer con un iframe? En caso afirmativo, ¿Dónde se pòne el codigo HTML en el tema AVADA? Gracias.
Hola
Eso lo tenes que hacer con Javascript con la funcion window.open.
Aca tenes la sintaxis que debes usar y las opciones: https://www.w3schools.com/jsref/met_win_open.asp
Hola Cristian,
Tengo el CONTENIDO de un sitio (licanoscrossfit.com) que debo mantener, pero el nombre del sitio no lo puedo usar más. Necestio que cuando tipeen en la barra de navegacón licanoscrossfit.com se cambie el nombre por licanosfit.com y levante el contenido.
Usé redirect en el htaccess y logré que me cambie la url pero no levanta el contenido, queda en blanco.
Este es el código del htaccess:
—————————-
RewriteEngine on
RewriteRule ^$ app/webroot/ [L] # subdirectorio donde se aloja el contenido del sitio
RewriteRule (.*) app/webroot/$1 [L] # subdirectorio donde se aloja el contenido del sitio
Redirect 301 / http://www.licanosfit.com/
——————————
Intenté por cpanel vía DNS con CNAME y A pero no me funcionó o algo hice mal…
Podrás darme una mano? Gracias!
Hola buenas, el código funciona perfectamente muchísimas gracias! Ahora mi problema es el siguiente:
Yo lo que hice fue crear un archivo index.html en el directorio del hosting y dentro copiar todo el código, pero al hacerlo así (con index.html) se me aplica por defecto a la home (pagina de inicio).
Yo desearía que no fuese a la home donde se aplique, sino a otra página distinta (https://mipaginaweb. com/xxxxxxx/ ► por ejemplo)
¿Cómo podría hacerlo?
PD: He visto que pones que si copio y pego todo el código directamente en el html de una página funcionaría en esa página pero yo lo hago y no funciona.
Hola Cristian! Buen artículo! Claro y al grano! Sin embargo no sé por qué a mí no me funcona…he creado un subdominio del dominio principal: intranet.magnetosur.com y ahí he insertado el fichero index.html con tu código; sin embargo me muestra una página en blanco y la url de la web de destino está bien puesta.
Se te ocurre qué puede ser? Entrando en esa url que te paso puedes ver en el inspector que está tu código tal cual…
Gracias!
Buen post!
Buen día, como podría utilizar iframes en una web que restringió su uso? Hay alguna otra forma de poder hacerlo?
Saludos
Normalmente si restringieron el uso de iframes, no podrás usarlo. Saludos!
Creo que si bien no todos tengamos la sencillez del dibujo en nuestras manos,
con algo de práctica y esfuerzo podemos dibujar bien.
Buenas. Sé que usar el enmascaramiento de url no ayuda al SEO y que se usa por motivos esteticos o marketing, pero… ¿google penaliza por su uso?
Hola,
Se puede usar esto en Angular 4? Y si es así, como se usaría?
Gracias!
Hola, lo sabes hacer sin un iframe? con .htaccess o con los registros?
Estoy necesitando hacer algo así pero que el contenido del sitio que se carga en el iframe sea responsible. Cómo sería?
Tenes que aplicar las reglas CSS responsive a las clases de los elementos dentro del iframe y ademas aplicarselas al mismo elemento iframe.
Saludos!
Esto permite también poner una web externa ocultando URL y mostrando versión responsiva en un móvil?
Hola Cristian,
Muy buen post, sólo tengo un detalle a adecuar, cuando recargo la página por medio del navegador, éste lo hace desde el index, ¿cómo recargar sólo el contenido del iframe?
Gracias y saludos.
Eso deseo saber también. ¿Pudiste conseguirlo?
Hola Cristian, de qué forma puedo hacer que la redirección incluya el responsive. Me pasa que la redirección por frame siempre funciona bien, pero si la ejecuto en un teléfono móvil se abre como si fuera la versión escritorio y no versión móvil.