Question

我尝试使用找到的here和here的解决方案来解决此问题，但未成功

我在我的问题前加上了React，因为我的应用程序在React上运行，我想学习如何以这种方式实现它。

我有一个<script/>，可以通过将其直接放置在普通的HTML页面上来相应地加载其内容，即： 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>

但是，我无法在React组件中获得相同的结果，即：

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

我收到以下错误：

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.

如何在React组件内部正确加载给定的<script />内容？

此外，这是一个代码sandbox

反应-“异步加载的外部脚本”错误

0 个答案: