Gatsby-js client side javascript inline in blog post

Question

I am trying to setup a Blog using Gatsby-JS. I have some posts in markdown that contain inline javascript.

As an example:

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

I test the site using the command "Gatsby serve"

When I browse to my post via the index of the blog. The script is not executed. In the web console there are no errors.

When on the post page itself. If I do F5 or ctrl-f5 then the "hello" alert is displayed.

After uploading the site to github pages this behavior changes. I cannot get the script to execute by F5 or by navigating via the index. Only when I press ctrl+F5 the script is executed.

live test-blog can be found here (it show multiple alerts and tries to load plotly). https://dwjbosman.github.io/lstm-neural-network-for-sequence-learning/

chrismacp · Accepted Answer · 2018-05-16 20:22:03Z

3

Dinne's solution worked for me. Nice one! :)

I did need to avoid the use of JQuery though so I have posted here a version that doesn't rely on it:

componentDidMount() {

  // Allow in-line JS scripts to be run
  let scripts = document.querySelectorAll('[data-inline-script="data-inline-script"]');
  scripts.forEach(function forEachScript(element) {
    const script = element.innerHTML;
    window.eval(script);
});

This will work with the following HTML:

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

I am using this on a very basic static site. I'm not sure how much I like using eval() to be honest but it should cause no harm in my use-case.

Update Although the above does work, I also need to include scripts using <script src="..."> which doesn't work :( This feels quite hacky too.

edited May 16, 2018 at 20:22

answered May 14, 2018 at 18:36

chrismacp

3,8912 gold badges33 silver badges39 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Kyle Mathews · Accepted Answer · 2017-12-04 02:25:21Z

2

Checkout this question React: Script tag not working when inserted using dangerouslySetInnerHTML

Script in HTML that is inserted by React's dangerouslySetInnerHTML won't get executed. The linked question has a work around that perhaps you can use.

answered Dec 4, 2017 at 2:25

Kyle Mathews

3,28827 silver badges22 bronze badges

Comments

dwjbosman · Accepted Answer · 2017-12-08 21:02:17Z

The previous answer pointed me in the right direction.

I gave all the inline scripts an attribute data-my-script. Next I added the following to layouts/index.jsx (not html.jsx as this is rendered only server side).

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>
    );
  }
}

Collectives™ on Stack Overflow

Gatsby-js client side javascript inline in blog post

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related