如何響應來自iframe的ajax調用？

Question

在我的iframe頁面中，用戶可以通過Ajax調用在列表中添加或刪除項目。

我還需要更新父頁面上列表中的項目數。 我怎樣才能做到這一點？

Answer 1

我已經使用iFrame中的Javascript將消息發布到父級上，完成了父級和iFrame之間的通信。

在iFrame中：

window.top.postMessage('Message', '*');

您還可以通過調用（*注意，您將需要頁面上的asp：ScriptManager控件來發布此消息服務器端（C＃））

ScriptManager.RegisterStartupScript(this, this.GetType(), "login_message", "javascript:window.top.postMessage('Message', '*');", true);

在父級中，您將需要設置一個偵聽器：

/* Retrieve message from iFrame */
window.onmessage = function (e) {
    var strMessage = e.data.toString();
    if (strMessage == 'Message') {
        /* Message Actions */
    }
};

如果您在IE 7或10+上存在兼容性問題，則可能需要以這種方式進行處理。 我發現上面的操作方式在某些版本的IE（甚至某些較新的版本，例如10）中存在問題。

// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent, function (e) {
    var strMessage = e.data.toString();
    if (strMessage == 'Message') {
        /* Message Actions */
    }
}, false);

在此示例中，字符串“ Message”從iFrame傳遞到父級。 父級在收到它后將其存儲在var strMessage中。 然后，在執行操作之前，請檢查該消息是否符合我的期望。 您可以輕松地使消息成為列表中的項目數。

這與如何在iframe和父網站之間進行通信非常相似？ 請注意，這在IE 7或更低版​​本中不起作用。