Como ocultar la URL (enmascarar URL con iframe al 100%)

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 !

Cursos de desarrollo web:

[featured_products per_page="12" columns="4"]

Diseñador y Programador Web Full-Stack especializado en PHP / MySQL / Laravel / Wordpress / HTML5 / CSS3 / JS.

117 thoughts on “Como ocultar la URL (enmascarar URL con iframe al 100%)

  1. Daniel Size ♔ (@Daniiable) Reply

    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.

    1. psd a html paso a paso Post author Reply

      Hola Daniel
      Acabo de agregar al final del post, el código completo.
      🙂
      Saludos!
      Cristian

  2. Roger Reply

    Hace años que este tip da vueltas por internet y siempre sigue vigente.
    Gracias por recordárnoslo.
    Saludos

  3. Juan Carlos Reply

    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

    1. Cristian (PSD a HTML) Post author Reply

      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

  4. MiguelJatib Reply

    Donde puedo encontrar el codigo completa, ya que no me resulta con el primero q pusiste
    saludos 😉

    1. Cristian (PSD a HTML) Post author Reply

      Hola Miguel
      El codigo funciona.
      Copia el ultimo que puse y reemplaza por tus datos.

      Saludos!
      Cristian

  5. jorge sardon Reply

    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

    1. Cristian (PSD a HTML) Post author Reply

      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

  6. Luis Reply

    lo que no entiendo es que:
    tendré que tener una pagina auxiliar por cada pagina que quiera ocultar su direccion? :S

    1. Cristian (PSD a HTML) Post author Reply

      Claro, si lo haces de esta forma, deberas enmascarar cada pagina con otra pagina.

      Saludos!

  7. alberto Reply

    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….

    1. PSD a HTML Paso a Paso Post author Reply

      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

  8. CiRO Reply

    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 ???

    1. Cristian - PSD a HTML Paso a Paso Post author Reply

      Jhonny
      El codigo va dentro del BODY de tu documento.
      Basicamente es 1 sola linea: la del IFRAME.

      Saludos
      Cristian

  9. Suhermano Reply

    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 😀

    1. Cristian - PSD a HTML Paso a Paso Post author Reply

      Hola «Serhumano»
      Con esta opcion SI enmascaras la URL destino, evitando que el usuario la vea.

      Saludos
      Cristian

      1. Suhermano Reply

        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í?

        1. Cristian - PSD a HTML Paso a Paso Post author Reply

          Claro, si el usuario tiene conocimientos de programacion HTML , accede al codigo, busca la etiqueta IFRAME, alli ver la URL de destino.

  10. maxor Reply

    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.

    1. Cristian - PSD a HTML Paso a Paso Post author Reply

      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!

  11. Javier Ayala Reply

    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.

    1. Cristian - PSD a HTML Paso a Paso Post author Reply

      Gracias Javier.
      La carga de trafico, recae en el servidor de la pagina externa.

      Saludos!
      Cristian

  12. Javier Reply

    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

    1. Cristian - PSD a HTML Paso a Paso Post author Reply

      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!

  13. Orlando Reply

    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!

    1. Cristian Carrera Post author Reply

      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!

  14. Joan Reply

    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!

    1. Cristian Carrera Post author Reply

      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!

  15. Antonio Reply

    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?

    1. Cristian Carrera Post author Reply

      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

    1. Cristian Carrera Post author Reply

      Juan
      Fikate lo que le respondi a Antonio en estos mismos comentarios.
      Asi lo podrías hacer.
      Saludos!

      1. gerardo Reply

        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

        1. Cristian Carrera Post author Reply

          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

          1. gerardo

            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; }

  16. Giaccomo Reply

    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.

  17. Enrique Reply

    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.

    1. Cristian Carrera Post author Reply

      Omar
      Verifica las medidas del iframe en el codigo.
      Sino enviame la url asi lo veo.
      Saludos!

  18. lasaro Reply

    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 !!!

  19. fjmg Reply

    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

  20. diego Reply

    HOLA COMO ESTAS ME FUNCIONO PERFECTAMENTE , LO ÚNICO QUE CADA VEZ QUE HABRO VARIAS PAGINAS SE ME ABREN VARIAS PAGINAS , POR QUE ?

  21. jose Reply

    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

  22. Gabriel Gonzalez Reply

    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.

  23. Eduardo Reply

    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.

  24. jhony Reply

    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.

  25. JOSETROM Reply

    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

  26. Antonio Reply

    Muy bueno, funciona perfecto, gracias!! solo le agregaria el meta viewport al head para que funcione con webs responsive

    1. noradriana Reply

      ¡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?

      1. Cristian Carrera Post author Reply

        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.

  27. To Reply

    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??

  28. Fernando Secchi Reply

    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…

    1. Cristian Carrera Post author Reply

      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!

  29. Pedro Reply

    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.

  30. Claudio Luis Acosta Reply

    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!

  31. Andres Reply

    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

    1. Cristian Carrera Post author Reply

      Como que vuelve a donde empezo?? Siempre deberia mostrarte lo mismo, lo que esta en el iframe.

  32. Victor Aguilar Reply

    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

  33. Plinio Reply

    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.

    1. Cristian Carrera Post author Reply

      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!

  34. alberto alejandro soto Reply

    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

    1. Cristian Carrera Post author Reply

      Alberto
      Esto no aplica para CMS’s porque suelen manejar un sistema de armado dinamico de HTML.
      saludos!

  35. ape Reply

    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)

    1. Cristian Carrera Post author Reply

      Gracias. Si claro, si alguien escribe la URL del iframe, va a la entrada directo. Saludos!

  36. Manuel Reply

    Buenas tardes, como se haría para que fuera responsivo? es que al verlo en móvil no se adapta.

    Quedo atento tus comentarios

      1. Manuel Reply

        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;
        }

        1. Cristian Carrera Post author Reply

          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.

  37. jahir Reply

    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??

  38. Romi Reply

    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!!

    1. Cristian Carrera Post author Reply

      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!

  39. Miki Girona Reply

    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.

  40. Juan Pablo Dupuy Reply

    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!

  41. RedSinCrisis Reply

    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.

  42. Julio Reply

    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!

  43. Marco Reply

    Buen día, como podría utilizar iframes en una web que restringió su uso? Hay alguna otra forma de poder hacerlo?
    Saludos

  44. Lacey Reply

    Creo que si bien no todos tengamos la sencillez del dibujo en nuestras manos,
    con algo de práctica y esfuerzo podemos dibujar bien.

  45. Mat Reply

    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?

  46. Overt Reply

    Estoy necesitando hacer algo así pero que el contenido del sitio que se carga en el iframe sea responsible. Cómo sería?

    1. Cristian Carrera Post author Reply

      Tenes que aplicar las reglas CSS responsive a las clases de los elementos dentro del iframe y ademas aplicarselas al mismo elemento iframe.
      Saludos!

  47. Hernan Reply

    Esto permite también poner una web externa ocultando URL y mostrando versión responsiva en un móvil?

  48. Fernando Tlatilolpa Reply

    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.

  49. Hernan Toledo M Reply

    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.

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

*

Este sitio usa Akismet para reducir el spam. Aprende cómo se procesan los datos de tus comentarios.