¿Cuáles son las diferencias entre el uso de un iframe y Ajax para incluir los contenidos de páginas externas?

StackOverflow https://stackoverflow.com/questions/382662

  •  23-08-2019
  •  | 
  •  

Pregunta

He estado leyendo sobre esto, y parece que si se utiliza Ajax sólo se puede llevar en el contenido que reside en el mismo dominio, mientras que con un iframe se puede llevar en el contenido de cualquier dominio. Es ese el caso? ¿Qué otras diferencias hay?

¿Fue útil?

Solución

Tenga en cuenta que son dos tecnologías completamente separadas.

A (i) marco realmente carga una página HTML completa en la zona en el navegador. Si la página está en el mismo o en otro dominio, para la visión pura, no importa.

Ajax sólo describe un sistema para facilitar JavaScript para hablar con (y con restricción de seguridad de corriente a través del navegador, solamente con) el servidor desde el que se documentan en el que se generó la llamada de JavaScript partir.

Las cargas (i) tecnología de marco y hace que una página HTML completa desde cualquier URL dada. Ciertas restricciones de seguridad con el acceso a otros documentos de otros dominios con JavaScript se siguen aplicando.

Con el Ajax, que sólo está destinado a un uso puramente JavaScript para hablar con el servidor de origen (enviar algunos datos) y por lo general obtener algunos datos de nuevo. En JavaScript. Lo que estos datos es y lo que haces con él, depende de usted. Ya sea que se inserta en el DOM (Document Object Model), piezas de cambio o carga una nueva página depende de usted.

Hasta cierto punto usted tiene toda la libertad que desea. Usted puede tener un (i) marco de una página, todavía hacer una llamada Ajax y decidir a cargar otra URL en la (i) marco. O utilizar el valor de retorno Ajax para generar nuevos HTML de forma dinámica dentro de la (i) marco. O en el exterior, en otro documento.

Las restricciones de seguridad que se aplican en este caso se llama "política del mismo origen".

Otros consejos

En pocas palabras, un iframe es como una trama regular, pero no se divide la ventana del navegador en secciones, que se encuentra justo dentro de una página y se ve afectado por la barra de desplazamiento.

Ajax, por otra parte, utiliza javascript para hacer cargas parciales de una página, permitiendo que pequeñas cantidades de datos para ser cargado desde el servidor sin tener que hacer una devolución de datos completa. Por ejemplo, YouTube utiliza Ajax cuando publique comentarios, votos, vídeos de la cola para jugar, etc. hacer esto para que el vídeo no se interrumpe y se reinicia por una devolución de datos completa página.

Además de estas diferencias mencionadas por otros, hay otros también. iframe carga toda una página html / php, ya sea desde el propio servidor u otro servidor externo. Por lo general, tiene una <html> fresca, <head> y la etiqueta <body> también. Ajax sólo carga parte de la página html / php.

Además, el Ajax tira de la CSS (y tal vez, incluso los códigos de javascript) desde el archivo principal, pero en caso de marco flotante, no se puede tirar de la misma.

por ejemplo esta es la codificación del archivo maestro. 

<!doctype html>
<html>
<head>
<style>
    .gappu {background-color:black;color:red;}
</style>
<meta charset="utf-8">
    <script src="../AllJqueries/jquery-1.11.3.min.js"></script> <!-- Use your own jQuery file -->
    <script>
        <!--
        $(document).ready(function(){
            $.ajax({url:"slave1.php?bare=true", success:function(data){
                $(".myDomain").html(data);
            }});
        }); /* End of Main Jquery */
        //-->
    </script>
<title>Ajax vs Iframe</title>
</head>

<body>
    <div class="myDomain"></div>
    <div>Iframe below</div>
    <iframe width="100%" height="500px" src="slave1.php"></iframe>
</body>
</html>

Ahora, también tenemos otro archivo, nombrado como slave1.php 

<?php
if(isset($_GET['bare'])) $bare = $_GET['bare'];
else $bare = false;
if(!$bare):
?>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>
    .gappu {background-color:blue;color:yellow;}
</style>
<!-- You can remove the above style later, and see the difference. The parent style will not apply for iframe -->
<title>Inside the Iframe</title>
</head>

<body>
<?php endif; ?>
    <div class="gappu">Hi, welcome to this demo</div>
<?php if(!$bare): ?>
</body>
</html>
<?php endif;

En caso de llamada de Ajax, la línea Hola, bienvenido a esta demo estará en fondo negro y el rojo, ya que está pidiendo prestado el css de los padres. Pero en iframe, que será en fondo azul y color blanco, que se define en slave1.php. Puede quitar el estilo de slave1.php, y encontrará texto sin formato impreso en formato de marco flotante.

Espero que esto ayude. Salud. Vijay Srinivas

Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top