Question

我一直在阅读这篇文章，似乎如果您使用ajax，您只能引入驻留在同一域中的内容，而使用iframe，您可以从任何域引入内容。是这样的吗？还有什么其他差异？

Answer 1

请记住，它们是两种完全独立的技术。

A（i）框架确实将区域中的完整HTML页面加载到浏览器中。无论页面是在同一个域还是在另一个域上，对于纯粹的查看都无关紧要。

Ajax仅描述了一个便于JavaScript与之交谈的系统（以及跨浏览器的当前安全限制，仅限于）您从中生成JavaScript调用的服务器。

（i）框架技术从给定的任何URL加载并呈现完整的HTML页面。使用JavaScript从其他域访问其他文档的某些安全限制仍然适用。

使用Ajax，它只是意味着使用纯粹的JavaScript与原始服务器通信（发送一些数据）并且通常会返回一些数据。在JavaScript中。这些数据是什么以及您使用它做什么取决于您。无论是将其插入DOM（文档对象模型），交换部件还是加载新页面都取决于您。

在某种程度上，你拥有自己想要的所有自由。您可以在页面上有一个（i）框架，仍然可以进行Ajax调用并决定将另一个URL加载到（i）框架中。或者使用Ajax返回值在（i）帧内动态生成新的HTML。或者在外面，在另一份文件中。

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

Answer 2

很简单，iframe就像一个常规框架，但它不会将浏览器窗口分成几个部分，它就位于页面内部并受到滚动条的影响。

另一方面，Ajax使用javascript来对页面进行部分加载，允许从服务器加载少量数据，而无需进行完整的回发。例如，Youtube在您发布评论，投票，排队视频等时使用Ajax。他们这样做是为了让您的视频不会被完整的页面回发中断和重新启动。

Answer 3

除了别人提到的这些差异外，还有其他差异。 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格式打印的纯文本。

希望这会有所帮助。干杯。 Vijay Srinivas

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

3 个答案: