rel="prerender" 加载事件？预呈现完成时通知用户

Question

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

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

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

Answer 1

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

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

或

link.onload = func;

为了获得最大的浏览器支持，请不要使用 link。只需使用 AJAX.

获取文件

Answer 2

不幸的是，rel="prerender" 没有触发加载和错误事件，Chrome/Firefox 也是如此（我不知道为什么） .

而不是我使用 rel="preload" 并且一切正常（但仅适用于 Chrome）

此外，您可以使用作为参数

添加资产类型

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

My Typescript Method to create a link 下载是下一个：

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

rel="prerender" 加载事件？预呈现完成时通知用户

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

html

javascript

prerender