上载 IE11上没有激活元素事件，IE的预加载后备

Posted 2021-03-31

IE11和Microsoft Edge 40中不会触发以下onload事件：

<link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="preload" as="style" onload="this.rel = 'stylesheet';">

如果你给onload元素一个有效的<link>，rel="stylesheet"会触发：

<link href="https://fonts.googleapis.com/css?family=Montserrat:300" rel="stylesheet" onload="alert('this works')">

什么是rel="preload"在Internet Explorer / Edge上的后备解决方案？

答案

经过一番挖掘后，我发现了一个可以检测来自rel="preload"的Yoav Weiss's article的解决方案：

var DOMTokenListSupports = function(tokenList, token) {
  if (!tokenList || !tokenList.supports) {
    return;
  }
  try {
    return tokenList.supports(token);
  } catch (e) {
    if (e instanceof TypeError) {
      console.log("The DOMTokenList doesn't have a supported tokens list");
    } else {
      console.error("That shouldn't have happened");
    }
  }
};

var linkSupportsPreload = DOMTokenListSupports(document.createElement("link").relList, "preload");
if (!linkSupportsPreload) {
  // Dynamically load the things that relied on preload.
}

以上是关于上载 IE11上没有激活元素事件，IE的预加载后备的主要内容，如果未能解决你的问题，请参考以下文章

Google 字体在 Internet Explorer (IE) 11 中不起作用

在 IE11 中，当单击其子元素之一时，焦点事件未在具有显示 flex 的可聚焦父 HTML 元素上触发

ie9 的过渡结束后备

带有 IE 11 后备的 css 模块、postcss + webpack

ActionScript 3 AS3：处理ie7中的预加载器

IE8 的 calc() 是不是有纯 CSS 后备