Помимо этих различий, упомянутых другими, есть и другие.
iframe загружает всю html / php страницу, будь то с собственного сервера или другого внешнего сервера. Обычно он также имеет новые теги <html>
, <head>
и <body>
. Ajax загружает только часть html / php страницы.
Кроме того, Ajax извлекает CSS (и, возможно, даже коды JavaScript) из родительского файла, но в случае Iframe он не может извлечь то же самое.
Например, это кодировка основного файла.
<!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>
Теперь у нас также есть другой файл с именем 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;
В случае вызова Ajax, строка Привет, добро пожаловать в эту демонстрацию будет на черном фоне и красного цвета, так как она заимствует css от родителя. Но в iframe это будет синий фон и белый цвет, который определен в slave1.php. Вы можете удалить стиль из slave1.php, и вы найдете простой текст, напечатанный в формате iframe.
Надеюсь, это поможет. Приветствия.
Виджай Шринивас