Ajax（Asynchronous JavaScript and XML）是一種用于在客戶端和服務器之間進行異步通信的技術，通過這種技術可以在不刷新整個頁面的情況下更新部分頁面內容。回調函數則是用來處理異步請求完成后返回的數據。而在回調函數中使用iframe可以實現更靈活的頁面操作。

假設我們有一個網頁，在其中有一個按鈕，當用戶點擊該按鈕時，通過Ajax的POST請求向服務器發送數據，并接收服務器返回的數據。我們可以定義一個回調函數，在請求成功后將返回的數據顯示在網頁中的一個指定位置。然而，如果我們希望將返回的數據以某種方式展示在網頁中的不同位置呢？這就可以使用iframe來實現。

<button onclick="loadData()">點擊加載數據</button>
<div id="content"></div>
<iframe id="hiddenIframe" style="display: none;"></iframe>
<script>
function loadData() {
var xhr = new XMLHttpRequest();
xhr.open("POST", "example.com/api/data", true);
xhr.setRequestHeader("Content-Type", "application/json");
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
document.getElementById("content").innerHTML = data.message;
document.getElementById("hiddenIframe").contentWindow.document.open();
document.getElementById("hiddenIframe").contentWindow.document.write('<h2>數據詳情</h2>');
document.getElementById("hiddenIframe").contentWindow.document.write('<p>' + data.details + '</p>');
document.getElementById("hiddenIframe").contentWindow.document.close();
}
}
var postData = JSON.stringify({username: "user123"});
xhr.send(postData);
}
</script>

在上述代碼中，我們首先定義了一個隱藏的iframe（<iframe id="hiddenIframe" style="display: none;"></iframe>），用于在回調函數中寫入數據。當Ajax請求成功返回數據后，我們首先通過document.getElementById("hiddenIframe").contentWindow.document.open()打開iframe的文檔，然后通過document.getElementById("hiddenIframe").contentWindow.document.write()向iframe中寫入HTML內容。最后，通過document.getElementById("hiddenIframe").contentWindow.document.close()關閉iframe的文檔。

通過使用iframe，在回調函數中我們可以更加靈活地操作頁面的展示效果。舉個例子，假設我們的網頁上有一個數據列表，列表項包含一個詳情按鈕。當用戶點擊詳情按鈕時，我們可以通過Ajax請求獲取該列表項對應的詳細數據，并將數據以彈框的方式展示出來。

要實現上述功能，我們可以在回調函數中使用iframe來顯示彈框內容。具體做法是，在點擊按鈕時首先創建一個隱藏的iframe，并通過設置src屬性為彈框頁面的URL，然后通過iframe的onload事件來監聽彈框頁面的加載完成。當頁面加載完成后，我們可以通過調用iframe的contentWindow屬性，來操作彈框頁面中的元素，例如修改彈框內的文本或樣式等。

<button onclick="showDetails(1)">顯示詳情</button>
<iframe id="dialogIframe" style="display: none;"></iframe>
<script>
function showDetails(itemId) {
var iframe = document.getElementById("dialogIframe");
iframe.onload = function() {
var dialogContent = iframe.contentWindow.document.getElementById("dialogContent");
var xhr = new XMLHttpRequest();
xhr.open("GET", "example.com/api/details/" + itemId, true);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4 && xhr.status === 200) {
var data = JSON.parse(xhr.responseText);
dialogContent.innerHTML = data.details;
// ... 其他操作彈框頁面的元素
iframe.contentWindow.showDialog();
}
}
xhr.send();
}
iframe.src = "dialog.html";
}
</script>

在上述代碼中，當用戶點擊詳情按鈕時，我們首先通過getElementById獲取到隱藏的iframe（<iframe id="dialogIframe" style="display: none;"></iframe>），然后給iframe的onload事件賦予了一個匿名函數。在該函數中，我們可以執行Ajax請求來獲取詳細數據，然后通過contentWindow操作iframe中的元素，最后調用彈框頁面的showDialog()方法來顯示彈框。

通過在回調函數中使用iframe，我們可以實現更加靈活和交互的頁面操作。無論是在網頁中展示返回的數據，還是在彈框中顯示詳細信息，都可以通過這種方法來實現。只要熟悉使用iframe的相關屬性和方法，就可以輕松完成各種頁面需求。