rel=“prerender” load event?预呈现完成时通知用户

rel="prerender" load event? Notify users when prerender finishes

本文关键字：完成时 用户 通知 event prerender load rel      更新时间：2023-09-26

在页面 A 上，我动态插入一个指向页面 B 的预呈现标签：<link rel="prerender" href="page B"/> 。

我想知道prerender在加载完页面 B 时是否触发了一个事件，我可以从页面 A 上的 javascript 访问该事件。

如果浏览器对此没有任何支持，还有其他解决方法吗？

不幸的是，加载和错误事件不会使用 rel="prerender" 触发，在 Chrome/Firefox 中也是如此（我不知道为什么）。

取而代之的是，我使用 rel="preload"，一切正常（但仅适用于 Chrome）

此外，您还可以使用 as 参数添加资产类型

<link rel="preload" as="document" href="some.html">

我的打字稿方法是创建下载链接的下一个：

private createLinkToPreload(externalHref: string): HTMLElement {
  let linkElement = document.createElement("link");
  linkElement.rel = "preload";
  linkElement.href = externalHref;
  let me = this;
  linkElement.onload = () => {me.onElementPreloaded(externalHref)};
  linkElement.onerror = () => {me.onElementPreloadError(externalHref)};
  return linkElement;
}
private onElementPreloaded(externalHref: string) {
  console.log(`${externalHref} preloaded`);
}
private onElementPreloadError(externalHref: string) {
  console.log(`Error while preloading ${externalHref}`);
}

link 标记在完成加载时触发加载事件。

link.addEventListener('load', func(e));

或

link.onload = func;

为了获得最大的浏览器支持，请不要使用 link 。只需使用 AJAX 获取文件即可。

相关文章：