使用Gatsby加载外部JS文件

在现代的JavaScript Web开发工作流程中，通过npm软件包安装JavaScript是很常见的。

但是，有时我们必须包括一个外部JavaScript文件，而现代工具可能会使此操作有些困难。

特别是，我需要在自己的网站中包含来自Wistia的视频，快速浏览后，所有内容看起来都比我想要的复杂得多。

Wistia给了我这个要嵌入的HTML代码段：

<script src="https://fast.wistia.com/embed/medias/VIDEOURL.jsonp" async></script><script src="https://fast.wistia.com/assets/external/E-v1.js" async></script><div class="wistia_responsive_padding" style="padding:56.25% 0 0 0;position:relative;"><div class="wistia_responsive_wrapper" style="height:100%;left:0;position:absolute;top:0;width:100%;"><div class="wistia_embed wistia_async_VIDEOURL seo=false videoFoam=true" style="height:100%;position:relative;width:100%"><div class="wistia_swatch" style="height:100%;left:0;opacity:0;overflow:hidden;position:absolute;top:0;transition:opacity 200ms;width:100%;"><img src="https://fast.wistia.com/embed/medias/VIDEOURL/swatch" style="filter:blur(5px);height:100%;object-fit:contain;width:100%;" alt="" aria-hidden="true" onload="this.parentNode.style.opacity=1;" /></div></div></div></div>

在一个“正常的” HTML网站上，也许像我通常用Hugo构建的那样，这简直太简单了。

我只是将此代码添加到我的页面中。

但是在Gatsby页面中，哪个是React组件？

我看了看一些插件，但没有人真正做到我想要的。

该解决方案可能有点“棘手”，但是却像个魅力一样起作用，我仍然觉得自己可以控制正在发生的事情。

我将HTML代码添加为JSX，可以正确转换所有HTML属性：class -> className，aria-hidden -> ariaHidden以及样式-使用类似https://magic.reactjs.net/htmltojsx.htm使其快速。

然后，我将此代码添加到gatsby-browser.js文件以添加我需要的脚本，页面加载：

const addScript = url => {
  const script = document.createElement("script")
  script.src = url
  script.async = true
  document.body.appendChild(script)
}

export const onClientEntry = () => {
window.onload = () => {
addScript(“https://fast.wistia.com/embed/medias/9rvl8vgrzg.jsonp”)
addScript(“https://fast.wistia.com/assets/external/E-v1.js”)
}
}

免费下载我的JavaScript初学者手册


更多js教程：


在线技术百科！