2

I unsuccessfully tried solving this issue with the solutions found here and here

I prefixed my question with React because my app is running on React and I'd like to learn how to implement it this way.

I have a <script/> that loads its content accordingly by placing it directly on a mundane HTML page i.e: codepen

<body>
    <div>
        <script type="text/javascript" src="https://app.jackrabbitclass.com/jr3.0/Openings/OpeningsJS?OrgID=534011&Cat1=8-Week%20Sessions&hidecols=Gender,Ages,EndDate,Session,Openings&sort=day"></script>
    </div>
</body>

However, I'm not able to get the same results inside of a react component i.e:

class Frame extends React.Component {
  componentDidMount() {
    const script = document.createElement("script");
    script.type = "text/javascript";
    script.src =
      "https://app.jackrabbitclass.com/jr3.0/Openings/OpeningsJS?OrgID=534011&Cat1=8-Week%20Sessions&hidecols=Gender,Ages,EndDate,Session,Openings&sort=day";
    script.async = true;
    document.querySelector(".frame-container").appendChild(script);
    //document.querySelector(".frame-container").insertBefore(script);
    //document.querySelector(".frame-container").innerHTML = script;
  }
  render() {
    return <div className="frame-container" />;
  }
}


function App() {
  return (
    <div className="App">
      <p>Did Frame load?</p>
      <Frame />
    </div>
  );
}

I get the follwing error:

Failed to execute 'write' on 'Document': It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.

How could I properly load the given <script /> content inside of a React Component?

Also, here's a code sandbox

Null isTrue
  • 1,882
  • 6
  • 26
  • 46
  • Possible duplicate of [Execute write on doc: It isn't possible to write into a document from an asynchronously-loaded external script unless it is explicitly opened.](https://stackoverflow.com/questions/24297829/execute-write-on-doc-it-isnt-possible-to-write-into-a-document-from-an-asynchr) – keul Jan 10 '19 at 17:17
  • Your external script is using the `document.write`API (which is really weird) – keul Jan 10 '19 at 17:18
  • @LucaFabbri would that be on their end (their external script) and is there something I could do to remedy that? – Null isTrue Jan 10 '19 at 17:24
  • Have you tried the same without adding `async` attribute to your script tag? – Shevchenko Viktor Jan 10 '19 at 17:24
  • @NullisTrue is doable for you to just put the JS script in your HTML? – keul Jan 10 '19 at 17:31
  • @ShevchenkoViktor I did. Same error. – Null isTrue Jan 10 '19 at 17:32
  • @LucaFabbri please remove the duplicate from my question, as I already referenced the suggested duplicate inside my own question. I applied the solutions suggested on that question but I couldn't get it to work. I can't put the js `script` inside of my index.html because the content is generated on a React Component. – Null isTrue Jan 10 '19 at 17:36
  • Sorry, but IMHO this is still a duplicate. Explanation of the issue and answer (do not use `document.write`) are in the linked answer – keul Jan 10 '19 at 17:42
  • I'm not passing/using `document.write`, rather I tried `innerHTML`, `apendChild` and `insertBefore` could you please post an answer here for what you have in mind? – Null isTrue Jan 10 '19 at 17:48

0 Answers0