3

estoy intentando usar un iframe para importar el contenido de un archivo html en otro. Todo funciona perfecto en la mayoría de los dispositivos excepto en Iphone y Ipad, específicamente en safari y chrome.

He intentado con las etiquetas

1.- 'iframe', no muestra el contenido correctamente

1.- 'object', el contenido se muestra pero no hace scroll

2.- 'embed', el contenido se muestra pero no hace scroll

3.- .load(), runtime.lasterror: the message port closed before a response was received.

4.- Php metodo include(), el contenido se muestra y hace scroll correctamente pero no carga, solo la página principal

Les dejo el código

<div class="scroll-wr">

<iframe src="wordoflifeaz/indexES.html" style="width: 100%; height: -webkit-fill-available;" scrolling="yes" />

</div>

Object

<div class="scroll-wr">
      <object type="text/html" data="wordoflifeaz/indexES.html" style="width: 100%; height: -webkit-fill-available;" >
      </object>
</div>

CSS

.scroll-wr {
    -webkit-overflow-scrolling: touch;
    overflow: scroll;
    width: 100%;
    height:-webkit-fill-available; 
}
1

1 respuesta 1

1

En pocas palabras, hay varias maneras sencillas de incluir un fichero HTML externo dentro de uno corriendo dentro del navegador del usuario. Pero para esto debes conocer tanto la versión del navegador de usuarios que frecuentarás, así como la compatibilidad con él mismo de lo que deseas realizar.

  • iFrames

    Como un poco de historia te ayudará, éste fue el inicio de la web con los famosos frames. Pero su uso fue descontinuandose poco a poco al llegar nuevas tecnologías como AJAX. Además que muchos navegadores causan conflictos con el uso de iFrames entre protocolos HTTP por medidas de seguridad previniendo así ataques XSS o CSRF.
  • AJAX

    Ésta tecnología fue una gran mejora en el desarrollo de las aplicaciones web, ya que con ésta misma puedes realizar solicitudes a otros ficheros, incluso otros servidores, sin la necesidad de refrescar la página.
  • Componentes HTML 5

  • Estos son muy comunes para cargar hojas de estilo, archivos JavaScript en ocaciones, etc.. Son conocidos por su etiqueta link. Un ejemplo de su uso es:
    <link rel="import" href="http://otrositio.com/elemento.html">
    
    En estos casos, para incluir estos tipos de arhcivos necesitas tener habilitado CORS dentro de ambos servidores para que se pueda realizar este tipo de acciones.
  • Object

  • Como bien lo mencionas, tambien es posible cargar los ficheros mediante un objeto, lo cual no es muy común cuando se trata de manejar diferentes usuarios con diferentes navegadores.

Solución práctica

Lo que yo haría, ya que mencionas que manejas PHP, es crear un fichero controlador de AJAX dentro del mismo servidor que el HTML y llamar su contenido por AJAX. Así, solo te encargarías de llamar el fichero externo con PHP (cURL, file_get_contents(), etc) y manejarlo con JavaScript dentro del navegador. Con esto te evitas muchos problemas de compatibilidad entre navegadores. Que sería algo así:

PHP

echo file_get_contents("http://www.otrositio.com");

JavaScript (jQuery)

$(document).load(function(){
   $("#cargar_fichero_externo").load("ajax.php");
}

Te dejo la idea junto con el trabajo de adaptarlo a tu código, y en cualquier parte que tengas problema con el código no lo dudes y vuelve a preguntar a la comunidad.

Igualmente dejo algunos enlaces para que puedas corroborar y conocer un poquito más del tema.

CORS: https://developer.mozilla.org/es/docs/Web/HTTP/Access_control_CORS

Cross-Site Scripting: https://www.seguridad.unam.mx/historico/documento/index.html-id=35

Cross-Site Request Forgery: https://www.welivesecurity.com/la-es/2015/04/21/vulnerabilidad-cross-site-request-forgery-csrf/

Compatibilidad iFrame: https://caniuse.com/#search=iframe

PHP file_get_contents(): http://php.net/manual/es/function.file-get-contents.php

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.