使用iframe和ajax来包含外部页面的内容有什么区别？
我一直在读这方面的文章，似乎如果你使用ajax，你只能引入驻留在同一个域中的内容，而使用iframe，你可以引入来自任何域的内容。真的是这样吗？还有什么不同之处？
回答 3
Stack Overflow用户
发布于 2008-12-19 16:42:29
请记住，这是两种完全不同的技术。
一个(I)框架真正将一个完整的HTML页面加载到浏览器中。无论页面是在同一个域上还是在另一个域上，对于纯粹的查看，都无关紧要。
Ajax仅描述了一种系统，以便于JavaScript与生成JavaScript调用的服务器进行通信(并且具有跨浏览器的当前安全限制，仅限于)。
(I)框架技术从任何给定的URL加载并呈现完整的HTML页面。使用JavaScript从其他域访问其他文档的某些安全限制仍然适用。
使用Ajax，它只意味着使用纯粹的JavaScript与原始服务器通信(发送一些数据)，并且通常会得到一些数据。在JavaScript中。这些数据是什么，以及您如何处理它，由您决定。是否将其插入到DOM (文档对象模型)、交换部件或加载新页面由您决定。
在某种程度上，你拥有你想要的所有自由。您可以在页面上有一个(I)框架，仍然进行Ajax调用，并决定将另一个URL加载到(I)框架中。或者使用Ajax返回值在(I)框架内动态生成新的HTML。或外部，在另一个文档中。
在这种情况下应用的安全限制称为“同源策略”。
Stack Overflow用户
发布于 2008-12-19 16:47:11
简单地说，iframe就像一个普通的框架，但是它不会将浏览器窗口分成几个部分，它直接位于页面内部，并且受到滚动条的影响。
另一方面，Ajax使用javascript对页面进行部分加载，允许从服务器加载少量数据，而无需执行完整的回发。例如，Youtube在你发布评论、投票、排队播放视频等时使用Ajax，这样你的视频就不会被完整的页面回发中断或重新启动。
Stack Overflow用户
发布于 2016-11-23 06:01:06
除了其他人提到的这些区别之外，还有其他的区别。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>现在，我们还有另一个文件，名为lave1.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 Hi，welcome to this demo将是黑色背景和红色，因为它是从父级借用的。但在iframe中，它将是蓝色背景和白色，这在lave1.php中定义。您可以从lave1.php中删除该样式，您将发现以iframe格式打印的纯文本。
希望这能有所帮助。干杯。Vijay Srinivas
https://stackoverflow.com/questions/382662
复制相似问题
腾讯云开发者
