Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

IE10和IE11下css资源重试不生效 #106

Open
7UP-hue opened this issue Sep 19, 2024 · 1 comment
Open

IE10和IE11下css资源重试不生效 #106

7UP-hue opened this issue Sep 19, 2024 · 1 comment

Comments

@7UP-hue
Copy link

7UP-hue commented Sep 19, 2024

在IE浏览器使用时发现css资源加载失败时重试不生效

写了一个简单的demo测试

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script>
    document.addEventListener('error', function (event) {
      console.log('load error');
      var target = event.target || event.srcElement;
      console.log(target);
    }, true)
  </script>
  <link rel="stylesheet" href="//test.com/xxx.css" crossorigin="anonymous">
  <script src="//test.com/xxx.js" ></script>
</head>
<body>
</body>
</html>

发现在chrome能够正常输出两个load error，但是在IE只能输出script的error。感觉像是link标签的error事件在IE监听不到？
@Nikaple
Copy link
Owner

Nikaple commented Sep 26, 2024

IE在 <link> 设置了 crossorigin="anonymous" 之后，仍然不能获取样式表；并且在 CSS 加载失败的时候只有 load 事件，没有 error 事件，所以无法区分加载成功与失败。

目前只能想到一个比较绕的方法来解决：

  1. 先在link元素上设置检查flag
<link
+ data-assets-retry-style-checker="sync"
  type="text/css"
  rel="stylesheet"
  href="/e2e/fixture/styles/sync.css"
/>
  1. 在CSS文件中，为对应的link增加待检查样式（使用animation-name，因为里面可以存放任意符合要求的字符串）
+ link[data-assets-retry-style-checker="sync"] {
+   animation-name: sync;
+ }

（上面两步可以通过打包插件实现）

  1. 在检测 CSS 是否加载成功时，对于包含 data-assets-retry-style-checker 的 <link> 元素，不使用 cssRules 来检测，而是检测 link 元素上 animation-name 的值是否正确

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@Nikaple @7UP-hue