Question

我正在尝试在Meteor的反应组件中包含一个外部脚本。我试图将脚本标记放在我的组件中，如下所示：

TheLounge = React.createClass({
  render() {
    return (
      <div>
        <div className="main">
          {/* Uberflip Embedded Hub (Use this to generate the frame below) */}
          <script>var ufh_top_offset = 0, ufh_bottom_offset = 0;</script>
          <script type="text/javascript" src="https://thelounge.tullyluxurytravel.com/hubsFront/embed_iframe?u=https%3A%2F%2Fthelounge.tullyluxurytravel.com%2Fh%2F%3Fembedded%3D1%26offsetTop%3D0%26offsetBottom%3D0%26hideHeader%3D1%26hideBanner%3D0%26hideFooter%3D1%26hidePriNav%3D0%26hideSecNav%3D0%26linkBreakOut%3D0"></script>
          {/* /End Uberflip Embedded Hub */}

        </div>
        <Footer />
      </div>
    );
  },
});

这使得第一次加载页面（通过另一个页面或刷新）很好。但是，当导航到另一个页面并返回时，脚本不会再次加载。

到目前为止，我尝试了以下内容：

在componentDidMount和componentDidUpdate中注入脚本，如下所示：

在componentDidMount和componentDidUpdate中：

var script = document.createElement("script");
script.type = "text/javascript";
script.src = url;
// Tested the line below with body, head, and a div with specific id.
document.getElementsByTagName("body")[0].appendChild(script);

我也尝试过使用这些软件包：

https://github.com/yariv/ReactScriptLoader
https://github.com/kadirahq/meteor-dochead
$。getScript加入（）

但是，通过上述四种方法，我得到了错误：

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.

我意识到这是因为我正在尝试加载的脚本使用document.write（）;

我没有尝试过的东西，我很欣赏如何将这个脚本包含在React组件中的新想法。

Answer 1

主体或模板中的

标签不由Meteor执行，它们经过解析，然后由Meteor的模板系统处理。尝试jQuery getScript函数：

Document

Answer 2

我没有试过这个，但我读了这篇文章。也许它可以帮助

https://maxlibin.com/meteor-include-external-javascript-files/

在React / Meteor中使用外部脚本

2 个答案: