javascript - 在服务器响应之前检测 iframe 内容更改

Question

是否有可能检测到 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 中的链接触发了某种长时间运行的进程，则状态指示器动画不会显示，因为网络服务器尚未发送其响应。状态指示器动画仅在服务器发送响应且新页面开始加载后显示(其中 readyState === 'loading')。

因此，最终结果是有时用户不知道发生了什么。在典型的 Web 浏览器中，当您单击链接时，会播放加载动画，即使服务器正在花时间响应也是如此。因为我的 Web 应用程序包含在 WinForms WebBrowser 控件中(而且我没有 WinForms 应用程序的控制权)，所以没有向最终用户显示任何正在发生的事情。

Answer 1

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

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

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