使用iframe和ajax包含外部頁面的內容有什麼區別？

我一直在閱讀這篇文章，看起來如果你使用ajax，你只能引入駐留在同一個域中的內容，而使用iframe你可以從任何域引入內容。是這樣嗎？還有什麼其他差異？使用iframe和ajax包含外部頁面的內容有什麼區別？

2008-12-20 Bobby

請記住，他們是兩種完全獨立的技術。

（i）框架確實會將區域中的完整HTML頁面加載到瀏覽器中。無論該頁面位於相同域還是另一個域中，純粹查看都無關緊要。

Ajax僅描述了一個系統，以便於JavaScript與您通過JavaScript生成JavaScript調用的文檔所在的文檔所在的服務器（以及與瀏覽器之間的當前安全限制進行對話）。（i）框架技術從給定的任何URL加載並呈現完整的HTML頁面。使用JavaScript訪問來自其他域的其他文檔的某些安全限制仍然適用。

使用Ajax，它僅僅意味着使用純粹的JavaScript與原始服務器通信（發送一些數據）並且通常會返回一些數據。在JavaScript中。這些數據是什麼，你用它做什麼，取決於你。無論您將其插入到DOM（文檔對象模型）中，交換零件還是加載新頁面都取決於您。

在某種程度上，你有你想要的所有自由。你可以在頁面上有一個（i）框架，仍然可以進行Ajax調用並決定將另一個URL加載到（i）框架中。或者使用Ajax返回值在（i）框架內動態生成新的HTML。或在外面，在另一個文件中。

在這種情況下適用的安全限制稱爲「同源策略」。

來源

2008-12-20 00:42:28 mark

因此，如果您決定使用什麼技術來顯示外部頁面，那麼您會使用iframe嗎？你可以告訴我，我不是開發人員，但我喜歡瞭解最佳實踐，所以當我與開發人員交談時，我有一些理解。 – Bobby 2008-12-20 00:48:00

很簡單，iframe就像是一個普通的框架，但它不會將瀏覽器窗口分成多個部分，它位於頁面內部並受滾動條的影響。

另一方面，Ajax使用javascript來執行頁面的部分加載，允許從服務器加載少量數據，而無需執行完整的回發。例如，當您發佈評論，投票，排隊播放視頻等時，Youtube使用Ajax。他們這樣做是爲了讓您的視頻不會被中斷並通過完整的頁面回發重新啓動。

來源

2008-12-20 00:47:11 Soviut

除了別人提到的這些差異之外，還有其他的。 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

來源

2016-11-23 06:01:05

使用iframe和ajax包含外部頁面的內容有什麼區別？

回答

相關問題