Question

我正在尝试使用Gatsby-JS设置博客。我在markdown中有一些包含内联javascript的帖子。

举个例子：

<script>window.alert("hello");</script>

我使用命令＆＃34; Gatsby serve＆＃34;

测试网站

当我通过博客索引浏览我的帖子时。该脚本未执行。在Web控制台中没有错误。

在帖子页面上本身。如果我做F5或ctrl-f5那么＆＃34;你好＆＃34;显示警报。

将网站上传到github页面后，此行为会发生变化。我不能让脚本通过F5执行或通过索引导航。只有当我按ctrl + F5时才会执行脚本。

live test-blog可以在这里找到（它显示多个警报并尝试加载剧情）。 https://dwjbosman.github.io/lstm-neural-network-for-sequence-learning/

Answer 1

之前的回答指出了我正确的方向。

我为所有内联脚本提供了一个属性data-my-script。接下来，我将以下内容添加到layouts / index.jsx（而不是html.jsx，因为这只是服务器端）。

componentDidMount() {
    let scripts = window.jQuery.find('[data-my-script]')
    console.log(scripts);
        scripts.forEach(function forEachScript(element) {
            const script = window.jQuery(element).text();
            window.eval(script);
        });

  }

  render() {
    const { children } = this.props;
    return (
      <Navigation config={config} LocalTitle={this.getLocalTitle()}>
        <div ref={contentElement => (this.contentElement = contentElement)}>
          <Helmet>
            <meta name="description" content={config.siteDescription} />
            // for plotly inside notebooks
            //  <script src="https://cdn.plot.ly/plotly-latest.min.js" />
            <script src="https://cdnjs.cloudflare.com/ajax/libs/require.js/2.3.5/require.min.js"/>
            <script src="https://code.jquery.com/jquery-3.2.1.min.js"/>
          </Helmet>
          {children()}
        </div>
      </Navigation>
    );
  }
}

Answer 2

Dinne的解决方案适合我。好一个！：）

我确实需要避免使用JQuery，所以我在这里发布了一个不依赖它的版本：

<script data-inline-script="data-inline-script">
    console.log("this works");
</script>

这将适用于以下HTML：

{{1}}

我在非常基本的静态网站上使用它。我不确定我多么喜欢使用eval（）来说实话，但它应该对我的用例没有任何伤害。

<强>更新虽然上面的确有效，但我还需要使用＆lt; script src =＆＃34; ...＆＃34;＆gt;来包含脚本。哪个不起作用:(这也感觉非常hacky。

Answer 3

查看此问题React: Script tag not working when inserted using dangerouslySetInnerHTML

由React＆＃39; s dangerouslySetInnerHTML插入的HTML脚本不会被执行。链接的问题有一个可能你可以使用的解决方法。

Gatsby-js客户端javascript in blog in

3 个答案: