Web 開發者們經常需要使用 iframe 來為 Web 頁面添加動態的、可變化的部分。這種技術可以提高 Web 應用程序的靈活性和交互性。

比如，在一個電商平臺上，用戶可以通過在搜索框中輸入關鍵字查詢商品信息。當用戶點擊“查詢”按鈕時，使用 Ajax 技術向服務器發送請求，服務器返回一個包含商品信息的 HTML 片段。我們可以使用 jQuery 的 $(selector).html() 方法把這個 HTML 片段插入到 Web 頁面中某個指定的元素中，比如一個 id 為“result”的 div 中。

<script>
$(document).ready(function(){
$("#searchBtn").click(function(){
var keyword = $("#searchInput").val();
$.ajax({
url: "/search",
type: "POST",
data: { keyword: keyword },
success: function(response){
$("#result").html(response);
}
});
});
});
</script>

然而，當我們的 Web 應用程序需要實現更高級的功能時，像這樣動態地向頁面中插入 HTML 片段就可能非常復雜，而且會出現一系列的兼容性問題。這個時候，我們可以使用 iframe。

比如在一個在線文檔編輯器應用中，我們通常會使用 iframe 來顯示文檔的內容。文檔編輯器的功能可以被分成兩個部分：編輯器本身和文檔的顯示。這樣，我們就可以把編輯器和文檔分別放在不同的 iframe 窗口中，這樣就大大提高了應用程序的靈活性和交互性。

<iframe id="editor" src="/editor.html"></iframe>
<iframe id="viewer" src="/viewer.html"></iframe>

當用戶點擊“保存”按鈕時，我們可以使用 iframe 的 contentWindow 屬性和 contentDocument 屬性來獲取 iframe 窗口中的文檔內容，并發送 Ajax 請求把這些內容保存到服務器上。

<script>
$(document).ready(function(){
$("#saveBtn").click(function(){
var editorWindow = $("#editor")[0].contentWindow;
var editorDocument = editorWindow.contentDocument || editorWindow.document;
var content = editorDocument.getElementById("content").innerHTML;
$.ajax({
url: "/save",
type: "POST",
data: { content: content },
success: function(response){
alert("保存成功！");
}
});
});
});
</script>

總之，使用 iframe 技術可以使 Web 應用程序更靈活、更交互，讓你能夠實現更復雜、更高效的功能。