如何在 Safari 上提供 ES6 模块?

2024-04-18

我有一个关于 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,所以也许那里发生了一些事情?

我想我有一个解决方案:

更改您的文件扩展名.js to .mjs。您可能还需要更新服务器的 mime 类型/扩展名关联。我在用着apache2- 我需要进入/etc/mime.types并修改行列表js还包含mjs(所以现在它会认为它是一个application/javascript.)

我进行了最简单的测试,然后就可以工作了 - 我需要在 Safari 上对我的网站进行更多测试,以验证它现在是否在所有预期浏览器上同样有​​效。

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何在 Safari 上提供 ES6 模块? 的相关文章

  • Vue 3:“defineProps”引用本地声明的变量

    为什么我收到警告错误消息 defineProps引用本地声明的变量 eslint vue valid define props 当我在 props 中使用自定义验证器时SFC
  • bash 别名中允许使用哪些字符[关闭]

    Closed 这个问题不符合堆栈溢出指南 help closed questions 目前不接受答案 我最近添加了 alias cd alias cd alias cd 到我的 bash aliases 文件 玩弄这个 我注意到在别名时 被
  • 锁定 contenteditable="true" div 中的元素

    我有一个用于用户输入的 contenteditable div 当单击按钮时 它会显示替换某些单词的选项 首先 它删除所有 html 并创建可以替换单词的 span 元素 这些词的标记不同 我面临一些问题 当直接在跨度之前或之后单击并键入文
  • JavaScript 动态变量名称[重复]

    这个问题在这里已经有答案了 好吧 我想在用户单击时创建变量 每次单击都会添加一个新变量 我目前正在使用 jquery 和 javascript 我无法在服务器端执行此操作 这必须在浏览器中完成 newCount document getEl
  • 表单方法=“获取”漂亮的URL

    所以我使用这个 HTML 表单作为一个简单的搜索字段
  • 如果 jQuery 验证失败,JSLint 有什么用?

    就目前情况而言 这个问题不太适合我们的问答形式 我们希望答案得到事实 参考资料或专业知识的支持 但这个问题可能会引发辩论 争论 民意调查或扩展讨论 如果您觉得这个问题可以改进并可能重新开放 访问帮助中心 help reopen questi
  • 返回 Web 浏览器中 HtmlElement 的所有属性

    我需要从我的网络浏览器获取所有属性 当前 我正在使用 GetAttribute 但这样 我需要知道属性的名称 想象一下我不知道我的网络浏览器中有什么 我的 C 代码 StringWriter strWriter new StringWrit
  • AngularJS ng-重复重新渲染

    我正在使用 AngularJS 构建一个简单的应用程序 应用程序向服务器发出异步 AJAX 调用 服务器返回一个如下所示的数组 paragraphs content content one content cnt two content r
  • 如何在 div 中加载页面?

    我被告知使用 Div 代替 iframe 是前进的方向 所以我使用横幅和主体中的框架 如何将我的index html加载到我的div中 你尝试过 jquery 的 load 吗 通过服务器端技术 您可以轻松地做到这一点
  • 使用 JS 或 Jquery 禁用浏览器窗口中的声音

    有没有办法禁用可能嵌入视频的浏览器窗口上的所有声音 我不是在寻找特定的解决方案 例如使用 js 等定位 Youtube 我需要一些通用的东西来关闭该页面的所有声音 这样如果任何视频播放它就没有声音 需要一些在页面级别关闭声音的东西 而不是通
  • 如何将参数传递给backbone.js 中事件对象中绑定的函数

    我需要为 Backbone 中的事件对象中使用的函数提供参数 var DocumentRow Backbone View extend tagName li className document row events click icon
  • Ember JS 过渡到嵌套路由,其中​​所有路由都是视图中的动态段

    我们正在使用 EmberJS 编写一个应用程序 然而 我们对这个框架仍然陌生 我们很难解决一些看似简单的问题 模型非常简单 有 3 个模型 Queue Task 和 Image 我们对所有路由使用动态 URI 段 并且这些模型的路由嵌套在以
  • 从 Angularjs 应用程序中的 iOS Webview 调用 Javascript 函数

    我的问题是 当我尝试从 UIWebView 中调用 AngularJS 应用程序中存在的 javascript 函数时 该函数无法识别 当我在典型的 html 结构中调用该函数时 该函数会按预期被识别 下面提供的示例 目标 C void v
  • javascript 中的独立括号[重复]

    这个问题在这里已经有答案了 可能的重复 JavaScript 为什么使用匿名函数包装器 https stackoverflow com questions 1643321 javascript why the anonymous funct
  • 标记内嵌套块级元素...对还是错?

    嵌套在语法和语义上是否正确 div 或任何其他块级元素内 p 标签 我说的是 HTML4 过渡 DTD 如果没有那么可以使用 span style display block 反而 从语法上来说 一个div里面一个p在所有 HTML 标准中
  • 如何通过 JQuery Post 传递 Javascript 数组,以便可以通过 PHP $_POST 数组访问其所有内容?

    如何通过 JQuery Post 传递 Javascript 数组 以便可以通过 PHP POST 数组访问其所有内容 请展示一个可以实现此目的的代码示例 Thanks 如果你想传递一个 JavaScript 对象 哈希 即 PHP 中的关
  • emberjs 对一条路线使用多个路径/url

    在 Ember 中我可以使用这个 App Router map function this route accomodations 因此 如果访问 accomodations 它将加载该视图 我还可以补充 App Router map fu
  • NSImage 到 NSBitmapImageRep

    如何将 NSImage 转换为 NSBitmapImageRep 我有代码 NSBitmapImageRep bitmapImageRepresentation NSBitmapImageRep ret NSBitmapImageRep s
  • 如何防止图像被裁剪

    我正在尝试创建一个包含很多图层的动画图片 为了在不同的屏幕上获得正确比例的图像 我使用covercss 属性值 我已经尝试过object fit对于图像和background size用于背景图像 这就是为什么我的宽屏幕图像被浏览器裁剪的原
  • jQuery UI .buttonset() 太慢

    我的 HTML 页面上有几千个按钮 运行需要10多秒 buttonset buttonset 文件准备好 有没有更快的方法来做到这一点 或者是我以某种方式限制按钮数量的唯一解决方案 创建buttonset在第一次显示之前按需进行 我刚刚测试

随机推荐

  • 使用 Node.js 验证 iOS 收据

    经过几天的努力 试图让某些东西起作用但一无所获 我想知道是否有人已经在 Node js 上实现了 iOS 收据验证 我尝试过发现节点模块iap verifierhere https github com pcrawfor iap verif
  • Composer 无法在 Windows 上工作,给出 [Composer\Exception\NoSslException] 错误

    我正在尝试在 Windows 10 上安装 Laravel 我安装了 Composer 来安装 Laravel 但它给出了以下错误 Composer Exception NoSslException openssl 扩展名是 SSL TLS
  • 在 RedHat 上安装 R 时出现依赖项不存在的错误

    我之前在运行 RedHat EL6 5 的机器上安装过 R 但最近在安装新软件包 即 install packages 时遇到了问题 由于我找不到解决方案 我尝试使用以下命令重新安装 R sudo yum remove R and sudo
  • Three.js 中几何图形的事件处理? [关闭]

    Closed 这个问题需要多问focused help closed questions 目前不接受答案 我正在寻找对 Three js 中的几何图形 相机 灯光 我们添加到场景中的东西 进行某种事件处理 我用谷歌搜索但找不到任何相关内容
  • REST API 错误消息是否应该国际化? [关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 在设计 REST API 的错误时 遵循标准 HTTP 代码 4XX 和 5XX 并包含主体 XML JSON 似乎是一个很好的做法 简短的信息
  • Next Js服务器端Api读写JSON

    我正在尝试使用 Next js 为自己编写一个基本的本地 api 它是一个时间线生成器 而我却陷入了实际从 api 文件夹中读取文件的困境 我想要在本地应用程序中得到什么 1 一个简单的页面 我可以在其中输入事件 以及日期和描述 2 在某处
  • 如何在Python中使用多线程并加速代码

    我正在尝试在 python 3 中使用多线程 加快某些代码的执行速度 基本上我必须在可迭代上运行相同的函数 channels range 1 8 我已经制作了一个到目前为止我正在使用的工作示例 我正在针对正常执行对其进行测试 我没有看到任何
  • 使用 Nokogiri 替换时的编码问题

    我有这个代码 encoding utf 8 require nokogiri s a href path to file Caf Verona a encode UTF 8 puts Original string s doc Nokogi
  • 运行模拟器时出现“com.android.exchange.ExchangeService 已泄漏...”错误[关闭]

    这个问题不太可能对任何未来的访客有帮助 它只与一个较小的地理区域 一个特定的时间点或一个非常狭窄的情况相关 通常不适用于全世界的互联网受众 为了帮助使这个问题更广泛地适用 访问帮助中心 help reopen questions 当我将模拟
  • NHibernate.Exceptions.GenericADOException:无法执行查询

    我有一个遗留应用程序 vfp 8 我需要从中提取数据 无插入 我使用 Accnum 字段作为主键 它在表中定义为字符 11 出厂配置
  • 如何检查 Google VM 实例是否已具有 gcloud 凭据

    为了不每次都打电话 gcloud auth login 这会中断用户输入的脚本 我想查看用户是否已经通过身份验证 任何用户 并且只有在没有用户的情况下 才调用gcloud auth login 我想要一个比抓取输出更优雅 可靠的解决方案gc
  • 为什么 ActionScript 中没有记录 drawRoundRectComplex() ?

    在研究actionscript 3的图形类时 我遇到了未记录的drawRoundRectComplex 方法 它是一个变种drawRoundRect 但有 8 个参数 最后四个是每个角的直径 x y 宽度 高度 左上 右上 左下 右下 ex
  • 将集合添加到列表框

    我正在尝试让用户能够添加name and ingredient到列表框 下面简单介绍一下相关类 RecipeForm是形式 RecipeManager是一个集合管理器类Recipe Recipe是 内容 类 其中字段name and ing
  • ggplot2 - 具有堆栈和闪避的条形图

    我正在尝试使用创建条形图ggplot2我通过一个变量进行堆叠并通过另一个变量进行躲避 这是一个示例数据集 df data frame year rep c 2010 2011 each 4 treatment rep c Impact Co
  • Linux (Fedora 13) 与 OS X 中的 sigwait

    因此 我尝试使用 pthreads 创建一个可在 OS X 和 Linux 上运行的信号处理程序 下面的代码适用于 OS X 但不适用于 Fedora 13 该应用程序相当简单 它生成一个 pthread 注册 SIGHUP 并等待信号 生
  • 好的斯坦福 Javascript 加密库 (SJCL) 示例? (JS密码学)[关闭]

    Closed 这个问题正在寻求书籍 工具 软件库等的推荐 不满足堆栈溢出指南 help closed questions 目前不接受答案 我正在寻找一种在 Javascript 中进行客户端加密的方法 保持http www matasano
  • 3D 图形矩阵 4x4 中最后一行的 magic 4 的用途是什么?

    当我阅读有关WebGL的书时 我看到了下一个矩阵描述 有关于书中最后一行的信息 WebGL 初学者指南 初学者指南 Diego Cantor Brandon Jones 神秘的第四排 第四排没有任何特殊之处 意义 元素 m4 m8 m12
  • 丰富域模型与贫乏域模型[关闭]

    Closed 这个问题是基于意见的 help closed questions 目前不接受答案 我正在决定是否应该使用丰富域模型而不是贫乏域模型 并寻找两者的好例子 我一直在使用贫血领域模型构建 Web 应用程序 并由服务 gt 存储库 g
  • 我的服务应该返回什么接口? IQueryable、IList、IEnumerable?

    想象一下 我有一个 SearchService 层 它有一个方法来搜索以某个字符串开头的所有汽车 public static class Searcher public IAnInterface
  • 如何在 Safari 上提供 ES6 模块?

    我有一个关于 Safari 中 ES6 模块使用的问题 这让我抓狂 因为它阻止我与 Safari 用户共享我的网站 我的网络应用程序和即将推出的 MWE工作得很好在以下环境中 Windows Chrome Edge 和 Firefox 均通