Блог

У меня есть приложение React, в котором я разрешаю пользователю указывать <script> теги, которые будут добавлены в качестве заголовков HTML. Они извлекаются после загрузки документа и сохраняются в виде свойств обычного текста (я не могу просто указать <script src="//some-location... , потому что это строка, а не файл). Я пробовал несколько вещей, но ничего не работает.

 let json = loadDataFromServer();
console.log(json.headerHTML); // prints <script type="text/javascript">alert("Header script working");</script>

// This just appends it as a string to the header.
document.getElementsByTagName("head")[0].append(json.headerHTML);
  

 // This appends the script tags properly, but doesn't run the script.
document.head.innerHTML = document.head.innerHTML   json.headerHTML;
  

Возможно, стоит упомянуть, что это часть приложения React, но, насколько я знаю dangerouslySetInnerHTML() , его нельзя использовать в заголовке, только основной HTML.

react-helmet может помочь достичь этого. Вы можете удалить открывающий и закрывающий script тег из ответа сервера и объединить содержимое заголовка, как показано ниже.

 import {Helmet) from 'react-helmet'

...
return (
    <>
      <Helmet>
        {json.headerHTML ? (
          <script>
            {`
              ${json.headerHTML}
            `}
          </script>
        ) : null}
      </Helmet>
      ...
    </>
)  

Это довольно просто. Вам нужно создать элемент DOM и добавить его в заголовок.

 const element = document.createElement('script');
element.innerHTML  = 'alert("hello");'
document.head.appendChild(element);