Quali sono le differenze tra l'utilizzo di un iframe e Ajax per includere il contenuto di una pagina esterna?

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

  •  23-08-2019
  •  | 
  •  

Domanda

Ho letto su questo, e sembra che se si utilizza Ajax si può portare solo nel contenuto che risiede nello stesso dominio, mentre con un iframe si può portare in contenuti da qualsiasi dominio. E 'questo il caso? Quali altre differenze ci sono?

È stato utile?

Soluzione

Si tenga presente che sono due tecnologie completamente separate.

A (i) cornice davvero carica una pagina HTML completa nella zona nel browser. Se la pagina è sullo stesso o di un altro dominio, per la visualizzazione puro, non importa.

Ajax descrive solo un sistema per facilitare JavaScript per parlare con (e con restrizione di sicurezza di corrente attraverso il browser, solo con) il server da cui si documento all'interno del quale è stata generata la chiamata JavaScript da.

I (i) carichi di tecnologia telaio e rende una pagina HTML completa da qualsiasi URL dato. si applicano ancora alcune restrizioni di sicurezza di accesso di altri documenti di altri domini con JavaScript.

Con l'Ajax, che è il solo scopo di utilizzare esclusivamente JavaScript per parlare con il server di origine (inviare alcuni dati) e di solito ottenere alcuni dati indietro. In JavaScript. Ciò che questi dati è e ciò che si fa con esso, spetta a voi. Sia che lo si inserisce nel DOM (Document Object Model), parti di scambio o di caricare una nuova pagina dipende da voi.

Per un certo grado di avere ogni libertà che si desidera. È possibile avere una (i) cornice in una pagina, ancora fare una chiamata Ajax e decidere di caricare un altro URL nel (i) telaio. Oppure utilizzare il valore di ritorno Ajax per generare nuovo codice HTML in modo dinamico all'interno del (i) telaio. O al di fuori, in un altro documento.

Le restrizioni di sicurezza che si applicano in questo caso si chiama "politica stessa origine".

Altri suggerimenti

Molto semplicemente, un iframe è come una cornice regolare, ma non dividere la finestra del browser in sezioni, si trova proprio all'interno di una pagina ed è influenzato dalla barra di scorrimento.

Ajax, d'altra parte, utilizza javascript per fare carichi parziali di una pagina, permettendo piccole quantità di dati da caricare dal server senza la necessità di fare un postback completo. Ad esempio, YouTube utilizza Ajax quando scrivi commenti, voti, la coda di video da riprodurre, ecc Essi fare questo in modo che il video non viene interrotto e riavviato da una pagina postback completo.

Oltre a queste differenze detto da altri, ci sono anche altri. iframe carica un intera pagina html / php, sia che si tratti dal proprio server o un altro server esterno. Di solito, ha un <html> fresco, <head> e tag <body> pure. Ajax carica solo una parte del / pagina html php.

Inoltre, Ajax tira il CSS (e forse, anche i codici javascript) dal file principale, ma in caso di Iframe, non può tirare lo stesso.

per esempio questo è il codice master file. 

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

Ora, abbiamo anche un altro file, chiamato come 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;

In caso di Ajax chiamata, la riga Ciao, benvenuto a questa demo sarà in sfondo nero e il colore rosso, dal momento che sta prendendo a prestito il css dal genitore. Ma in iframe, sarà in sfondo blu e il colore bianco, che è definito in slave1.php. È possibile rimuovere lo stile dal slave1.php, e troverete solo testo stampato in formato iframe.

Spero che questo aiuti. Saluti. Vijay Srinivas

Autorizzato sotto: CC-BY-SA insieme a attribuzione
Non affiliato a StackOverflow
scroll top