如何响应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);

在Parent中，您需要设置一个监听器：

/* 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或更早版本中不起作用。