4

是否可以检测到 iframe 的内容何时将发生变化，例如何时开始请求（用户单击 iframe 中的链接的结果）但服务器尚未发送响应？

背景：

我有一个在不显示加载状态的容器中使用的旧版 Web 应用程序。此 Web 应用程序还使用 iframe 来模拟部分页面加载。所有导航都发生在该 iframe 内。

当 iframe 中的页面正在加载时，我通过监视 iframe 的onreadstatechange事件（仅限 IE）在 iframe 的父页面上显示加载动画：

$('#iframe').on('readystatechange', function () {
    var state = this.readyState;

    (state === 'loading' || state === 'interactive') && $('#loading').show();
    state === 'complete' && $('#loading').hide();
});

然而，这种实现有一个很大的限制。当发出请求和 Web 服务器响应之间存在间隙时，就会出现问题。

例如，如果用户单击 iframe 中触发某种长时间运行进程的链接，则不会显示状态指示动画，因为 Web 服务器尚未发送响应。状态指示器动画仅在服务器发送响应并且新页面开始加载（其中readyState === 'loading'）后显示。

所以最终结果是有时用户不知道任何事情正在发生。在典型的 Web 浏览器中，当您单击链接时，会播放加载动画，即使服务器正在花时间响应。因为我的 Web 应用程序包含在 WinForms WebBrowser 控件中（并且我无法控制 WinForms 应用程序），所以最终用户没有任何迹象表明正在发生任何事情。

4

1 回答 1

3

由于 iframe 页面和父页面的来源相同 - 它们可以相互通信。您所要做的就是将处理程序附加到 iframe contentWindowonbeforeunload事件。

您将在 contentWindow 事件中显示“正在加载...” onbeforeunload- 因为它发生在页面开始导航之前，并在 iframe 中隐藏“正在加载...”，onload因为它发生在之后。

这是演示： http: //jsfiddle.net/xga7Q/1/单击需要一些时间才能加载的链接（例如展开“示例”并选择任何示例。

于 2013-09-17T13:46:11.117 回答