Was sind die Unterschiede zwischen einem iframe und Ajax, um den Inhalt einer externen Seite enthalten?

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

  •  23-08-2019
  •  | 
  •  

Frage

Ich habe zu diesem Thema zu lesen, und es scheint, dass, wenn Sie AJAX verwenden, können Sie nur in Inhalt zu bringen, die während bei einem iframe auf der gleichen Domäne befindet Sie in der Content aus allen Domäne bringen kann. Ist das der Fall? Welche anderen Unterschiede gibt es?

War es hilfreich?

Lösung

Beachten sie sind zwei völlig getrennte Technologien.

A (i) Frame lädt wirklich eine komplette HTML-Seite in dem Bereich in den Browser. Ob die Seite auf der gleichen oder einer anderen Domäne ist, für die reine Betrachtung, spielt keine Rolle.

Ajax beschreibt nur ein System JavaScript zu erleichtern mit (und mit den aktuellen Sicherheitseinschränkung über Browser, nur mit), um den Server, von dem Sie in dem Sie die JavaScript-Aufruf erzeugt dokumentieren sprechen von.

Die (i) Frame-Technologie lädt und rendert eine vollständige HTML-Seite von einem beliebigen URL angegeben. Bestimmte Sicherheitseinschränkungen andere Dokumente aus anderen Domänen mit JavaScript den Zugriff auf noch gelten.

Mit Ajax, ist es nur lediglich JavaScript verwenden, um den ursprünglichen Server (senden einige Daten) und in der Regel einige Daten wieder zu sprechen. In JavaScript. Was diese Daten ist und was Sie damit machen, bleibt Ihnen überlassen. Ob Sie es in das DOM (Document Object Model) einzufügen, Austauschteile oder laden eine neue Seite ist, dass Sie bis zu.

Bis zu einem gewissen Grad haben Sie alle Freiheit, die Sie wollen. Sie können einen (i) Frame auf einer Seite haben, noch einen Ajax-Aufruf machen und entscheiden, eine andere URL in die (i) Rahmen zu laden. Oder nutzen Sie den Ajax Rückgabewert neue HTML zu generieren dynamisch innerhalb der (i) Rahmen. Oder außerhalb, in einem anderen Dokument.

Die Sicherheitseinschränkungen in diesem Fall die Anwendung ist "Same Origin Policy" genannt.

Andere Tipps

Ganz einfach, ist ein iframe wie ein normaler Rahmen, aber es spaltet nicht das Browserfenster in Abschnitte, es direkt in einer Seite sitzt und durch die Scrollbar betroffen.

Ajax, auf der anderen Seite nutzt Javascript Teillasten von einer Seite zu tun, kleine Datenmengen ermöglicht vom Server geladen werden, ohne dass eine vollständige Postbacks zu tun. Zum Beispiel verwendet Youtube Ajax, wenn Sie Kommentare schreiben, abstimmung, Warteschlange zum Abspielen von Videos, etc. Sie tun dies, damit Ihr Video durch eine vollständige Seite Postbacks nicht unterbrochen und neu gestartet wird.

Neben diesen Unterschieden von anderen erwähnt, gibt es andere auch. iframe lädt eine ganze html / PHP-Seite, sei es aus dem eigenen Server oder einem anderen externen Server ist. Normalerweise hat es eine frische <html>, <head> und <body> Tag auch. Ajax lädt nur einen Teil der html / PHP-Seite.

Außerdem zieht Ajax die CSS (und vielleicht auch Javascript-Codes) von der übergeordneten Datei, aber im Fall von Iframe, es ist das gleiche nicht ziehen kann.

Z. B ist dies die Master-Datei-Codierung. 

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

Jetzt haben wir auch eine andere Datei, wie slave1.php Namen 

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

Bei Ajax-Aufruf, die Zeile Hallo, willkommen in diese Demo in schwarzem Hintergrund sein und rote Farbe, da es die CSS von der Mutter leiht. Aber in iframe, wird es in den blauen Hintergrund und weißer Farbe sein, die in slave1.php definiert ist. Sie können den Stil von slave1.php entfernen, und Sie werden Klartext gedruckt in iframe-Format.

Hoffe, das hilft. Prost. Vijay Srinivas

Lizenziert unter: CC-BY-SA mit Zuschreibung
Nicht verbunden mit StackOverflow
scroll top