Question

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

背景：

我有一个遗留的网络应用程序，它在一个没有显示加载状态的容器中使用。此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应用程序），所以没有任何迹象表明最终用户发生了任何事情。

Answer 1

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

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

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

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

1 个答案: