2023/12/27 14:25:19
页面加载超时检测
功能描述
页面录制场景下,网络异常等偶然因素可能会造成如下问题:
- 页面加载时间较长且加载时长不固定,无法获知真正开始有效录制的时间点,可能会丢录重要内容。
- 页面加载不成功,由于没有出错上报机制,浏览器端不会重新加载页面,从而导致录制内容与预期不一致等问题。
为了解决上述问题,页面录制支持页面加载超时检测。开始页面录制后,你需要自行调用接口通知浏览器页面加载完成,实现以下功能:
- 若在设定的时间内,浏览器收到页面加载完成的通知,则录制正常进行。
- 若在设定的时间内,浏览器未收到页面加载完成的通知,则浏览器自动重新加载页面,并以事件消息的方式及时通知开发者。如果页面再次加载超时,则录制服务停止,避免录制错误内容。
信息
声网页面加载超时检测功能仅能保障页面元素加载正确,如果你对页面录制需要更加全面的保障,请参考页面录制集成最佳实践。
前提条件
使用该功能需要开启消息通知服务,以便接收服务端事件回调。
实现方法
你需要通过如下两个步骤实现页面加载超时检测。
设置页面加载超时时间
调用 start
方法时通过 readyTimeout
字段设置页面加载超时的时间限制。
readyTimeout
:Number 类型,单位为秒,取值范围 [0,60]:
0
或不设置,表示不检测页面加载状态≥ 1
,表示页面加载超时时间≤ 0
或非整数,表示设置错误,会收到错误码2
判断加载是否完成并通知浏览器
你需要自行判断页面是否加载完成,然后实现后续逻辑。
- 页面加载完成
- 页面加载超时
如果页面加载完成,则在设定的 readyTimeout
时间内调用 notifyReady
方法通知浏览器页面加载成功。如下图所示:
notifyReady
的调用示例如下:
JavaScript
<script>
function notifyReady() {
if (typeof window.navigator.notifyReady === 'function')
window.navigator.notifyReady();
}
</script>
信息
如果还需要录制其他页面,则需要在待录制页面中再次设置 notifyReady
接口的逻辑。
如果页面加载超时,即在设定的 readyTimeout
时间内未调用 notifyReady
方法通知浏览器,则浏览器自动重新加载页面。你会收到 web_recorder_reload
事件回调,其中 reason
字段为 page_load_timeout
。
- 如果重新加载成功,则参考页面加载完成的逻辑,调用
notifyReady
方法通知浏览器。 - 如果页面加载再次超时,则表示页面重新加载失败,录制服务停止。你会收到
web_recorder_stopped
事件回调,其中code
为4
,message
为page_load_timeout
。
工作原理如下图所示:
API 参考
本文使用的 API 详细文档可以参考如下链接: