javascript - rel ="prerender"加载事件？预渲染完成时通知用户

Question

在页面 A 上，我动态插入一个指向页面 B 的预渲染标记:<link rel="prerender" href="page B"/> .

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

如果浏览器对此不支持，是否还有其他解决方法？

Answer 1

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

相反，我使用 rel="preload" 并且一切正常(但仅适用于 Chrome)

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

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

我的 typescript 方法创建下载链接是下一个:

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}`);
}