React/Meteorでの外部スクリプトの使用

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（）

しかし、I上記のアプローチの4つのすべてのエラーを取得すると：

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

私はこれを試していませんでしたが、炎のためにこれを読んでいました。ボディやテンプレートで

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

Answer 2

タグは流星で実行されていないのに役立ちます多分それは、それらが解析され、その後、流星のテンプレートシステムによって処理されることができます。 jQueryのgetScript関数を試してみてください：

componentWillMount() { 
    $.getScript('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'); 
}