什么是使用iframe和Ajax包括外部页面的内容之间的区别是什么？

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

  •  23-08-2019
  •  | 
  •  

题

我一直在阅读了这一点，它似乎是，如果你使用AJAX你只能在驻留在同一个域，而用一个iframe，你可以在内容带来任何域中的内容带来的。是这样吗？有什么其他方面的差异有哪些？

有帮助吗？

解决方案

请记住他们是两个完全不同的技术。

A（I）帧确实在装载区域中的完整的HTML页面到浏览器。是否在网页上是同一个或另一个域，对于纯观看，都没有关系。

阿贾克斯只描述了一个系统，方便JavaScript和交谈（以及跨浏览器当前的安全限制，只能用），从中您文档中，你产生从JavaScript调用服务器。

在（I）帧技术加载和呈现从给出的任何URL一个完整的HTML页面。访问来自其他域的其他文档的JavaScript某些安全限制仍然适用。

使用Ajax，它只是意味着使用纯JavaScript来交谈的原始服务器（发送一些数据），并通常会得到一些数据回来。在JavaScript中。这是什么数据，你用它做什么是由你。不管你将其插入到DOM（文档对象模型），交换部件或装入一个新的页面是由你。

要在一定程度上你有你想要的所有自由。你可以有一个页面上的（I）帧，还使一个Ajax调用，并决定到另一个URL加载到第（i）帧。或者使用Ajax的返回值到第（i）框架内的动态生成新的HTML。或外侧，在另一文件。

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

其他提示

很简单，一个iframe是像一个普通的帧，但它不向上分割浏览器窗口段，它位于右一个页面内，并通过滚动条的影响。

的Ajax，在另一方面，使用JavaScript来执行网页的部分加载，允许少量的数据将要从服务器加载，而无需做一个完整的回发。例如，YouTube使用Ajax，当您发表评论，投票，排队视频播放等，他们这样做，让影片不是由一个完整的网页提交中断和重启。

除了由他人提到的这些差异，也有其他人。 iframe中加载整个HTML / PHP页面，无论是从自己的服务器或其他外部服务器。通常情况下，它有一个新鲜的<html>，<head>和<body>标签为好。 Ajax的只加载的HTML / PHP的网页的一部分。

此外，Ajax的拉动CSS（也许，甚至JavaScript的代码）从父文件，但在I帧的情况下，也不能拉相同。

E.g这是主文件的编码。

<!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格式打印纯文本。

希望这有助于。干杯。 维杰SRINIVAS

许可以下： CC-BY-SA 和 归因
不隶属于 StackOverflow
scroll top