问使用iframe和ajax来包含外部页面的内容有什么区别？
EN

Stack Overflow用户

提问于 2008-12-19 16:35:50

回答 3查看 6.1K关注 0票数 3

我一直在读这方面的文章，似乎如果你使用ajax，你只能引入驻留在同一个域中的内容，而使用iframe，你可以引入来自任何域的内容。真的是这样吗？还有什么不同之处？

ajax

iframe

external

回答 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。或外部，在另一个文档中。

在这种情况下应用的安全限制称为“同源策略”。

票数 13

Stack Overflow用户

发布于 2008-12-19 16:47:11

简单地说，iframe就像一个普通的框架，但是它不会将浏览器窗口分成几个部分，它直接位于页面内部，并且受到滚动条的影响。

另一方面，Ajax使用javascript对页面进行部分加载，允许从服务器加载少量数据，而无需执行完整的回发。例如，Youtube在你发布评论、投票、排队播放视频等时使用Ajax，这样你的视频就不会被完整的页面回发中断或重新启动。

票数 1

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;