Встроенный JavaScript на стороне клиента Gatsby-js в сообщении в блоге

Я пытаюсь создать блог с помощью Gatsby-JS. У меня есть несколько сообщений в markdown, которые содержат встроенный javascript.

В качестве примера:

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

Тестирую сайт командой "Gatsby serve"

Когда я просматриваю свой пост через индекс блога. Скрипт не выполняется. В веб-консоли ошибок нет.

Когда на самой странице поста. Если я нажму F5 или ctrl-f5, то отобразится предупреждение "привет".

После загрузки сайта на страницы github это поведение меняется. Я не могу заставить скрипт выполняться с помощью F5 или навигации по индексу. Только когда я нажимаю ctrl + F5, скрипт выполняется.

live test-blog можно найти здесь (он показывает несколько предупреждений и пытается загружаться по графику). https://dwjbosman.github.io/lstm-neural-network-for-sequence-learning/


webpack javascript gatsby
person dwjbosman    schedule 02.12.2017    source источник

Ответы (3)


arrow_upward
3
arrow_downward

Решение Динна сработало для меня. Хороший! :)

Мне действительно нужно было избегать использования JQuery, поэтому я разместил здесь версию, которая на него не полагается:

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

Это будет работать со следующим HTML:

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

Я использую это на очень простом статическом сайте. Я не уверен, насколько мне нравится использовать eval (), если честно, но в моем случае это не должно причинить вреда.

Обновление. Хотя вышеперечисленное работает, мне также нужно включить сценарии с использованием ‹script src =" ... "›, что не работает :( Это тоже кажется довольно хакерским.

person chrismacp    schedule 14.05.2018

arrow_upward
2
arrow_downward

Проверить этот вопрос React: тег скрипта не работает при вставке с помощью опасноSetInnerHTML < / а>

Скрипт в HTML, вставленный dangerouslySetInnerHTML в React, не будет выполнен. Связанный вопрос имеет обходной путь, который, возможно, вы можете использовать.

person Kyle Mathews    schedule 04.12.2017

arrow_upward
2
arrow_downward

Предыдущий ответ указал мне правильное направление.

Я дал всем встроенным скриптам атрибут data-my-script. Затем я добавил следующее в layout / 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>
    );
  }
}
person dwjbosman    schedule 08.12.2017