我有一个关于 Safari 中 ES6 模块使用的问题。这让我抓狂,因为它阻止我与 Safari 用户共享我的网站。
我的网络应用程序和即将推出的 MWE工作得很好在以下环境中:
- Windows:Chrome、Edge 和 Firefox 均通过 Windows 本地服务器 (WAMP) 和我的 Web 服务器;
- 移动设备:Chrome、Firefox(Android 和 iOS 版)。即使是 Android 版的 Samsung Mobile 和 Opera 也能正常工作。
- MacOS:
- on Safari、Chrome 和火狐浏览器通过 Mac 本地服务器(AMPPS);
- 通过我的网络服务器在 Chrome 和 Firefox 上。
但是,我的网络应用程序无法通过我的网络服务器在 MacOS Safari 中工作(目前我正在 Safari 13.0.4 上尝试此代码,但上述浏览器的所有现代版本对于此问题的行为方式相同)。同样,它也不适用于最新版本的 iOS Safari。
MWE
./test_class.js
export class TestClass {
constructor() {
console.log("Created a test class");
}
}
./index.html
<!DOCTYPE html>
<script type="module">
console.log("Starting the main script.");
// The following line seems to cause an error in Safari only
import { TestClass } from './test_class.js';
// The rest is not executed due to the error
let test_class = new TestClass;
console.log("Done.");
</script>
控制台输出
当我加载时索引.html从我的服务器,Safari 的控制台给了我错误
TypeError:“text/html”不是有效的 JavaScript MIME 类型。
附加信息(不确定是否相关)
当我进入 Safari 的资源部分时,确实有一个条目测试类.js不包含上面的代码,而是:
<html>
<body>
<script type="text/javascript" src="/aes.js" ></script>
<script>
function toNumbers(d)
// ...
function toHex()
// ...
var a = toNumbers("..."),
b = toNumbers("..."),
c = toNumbers("...");
document.cookie = "...";
location.href="http://www.my_super_website.com/test_class.js?i=1";
</script>
</body>
</html>
仅当我连接到我的服务器时才会发生这种情况。有没有线location.href="http://www.my_super_website.com/test_class.js?i=1";
合理?我的理解是,此时 Safari 会尝试加载测试类.js但有一些问题。
到目前为止我尝试过的
- 如果我删除该行
import { TestClass } from './test_class.js';
,一切正常。
- 如果我将
import
在新的脚本文件中调用,然后在 html 文档中使用该脚本文件。
- 我验证了我的文件命名方式./test_class.js是正确的,但由于这适用于大多数浏览器,我想它没问题。
- 我正在使用免费托管解决方案 infinityfree.net,所以也许那里发生了一些事情?