排错:Svelte应用的 <head> 中出现重复元素

  • 胡键
  • 更新于 2023-08-02 18:04
  • 阅读 800

排错:Svelte应用的 <head> 中出现重复元素

症状

打开 Svelte 应用的 html 源码,有多个重复元素(内容完全重复)存在,比如&lt;script>和 &lt;style>

原因

这种情况十有八九是因为在一个非全局的 svelte 组件中使用了 &lt;svelte:heade>,并且这里有一个尚未关闭的 bug

解决

了解原因之后,处理方式自然也就出来了。通常有两个选择:

  • 方法 1:将 &lt;svelte:heade> 部分内容挪到全局组件中,比如 App.svelte
  • 方法 2:在组件的 onDestroy 方法中手工移出相关元素。

使用方法 1 时请注意

有些外部脚本可能在加载时有初始化的回调函数。比如 Google Map API,其 url 形式如下:

&lt;script
  src="https://maps.googleapis.com/maps/api/js?key={GOOGLEMAP_KEY}&libraries=places&callback=initMap&solution_channel=..."
  async
  defer
>&lt;/script>

其中,callback 指定的就是页面自定义的回调函数,在 js 加载成功之后执行。

针对于此,若采用方法 1,则可以(简单粗暴地):

  1. 在全局组件或外部首页(比如 routify 的 __app.html)

    &lt;script src="https://maps.googleapis.com/maps/api/js?key={GOOGLEMAP_KEY}&libraries=places&solution_channel=...">&lt;/script>

    注意:去掉了延迟加载和 callback 参数。

  2. 在对应组件的 onMount 中调用 initMap 函数,由于此时 js 已经加载,再调用初始化函数自然可以。

当然,实际情况复杂多变,这里也只能提供解决问题的方法和思路。归根结底,只有知道了原因,办法也就呼之欲出了。

点赞 0
收藏 0
分享
本文参与登链社区写作激励计划 ,好文好收益,欢迎正在阅读的你也加入。

0 条评论

请先 登录 后评论
胡键
胡键
CSM / 架构师 / 创业者,先后就职于中兴和 SAP,现专注于工业物联网、机器学习和区块链。同时,作为机器学习和区块链技术活动的组织者和分享者活跃于本地社区。