2016-06-13 11 views
0

Ich versuche, ein externes Skript in meine Reaktionskomponente in Meteor aufzunehmen. Ich habe versucht, nur den Script-Tag in meiner Komponente platzieren wie so:Verwenden eines externen Skripts in React/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> 
    ); 
    }, 
}); 

Dies zum ersten Mal ist es in Ordnung macht die Seite (über eine andere Seite oder ein Refresh) geladen wird. Das Skript wird jedoch nicht erneut geladen, wenn zu einer anderen Seite und zurück navigiert wird.

  • Injizieren das Skript in componentDidMount und componentDidUpdate wie folgt aus::

    Bisher habe ich folgendes versucht

In componentDidMount und 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); 

I‘ Ich habe auch versucht, diese Pakete zu verwenden:

jedoch mit allen vier der Ansätze oben ich den Fehler:

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. 

ich, weil das Skript, das ist klar Ich versuche zu laden verwendet document.write();

Mir fehlen die Dinge, um zu versuchen, ich würde neue Ideen schätzen, wie dieses Skript in die React-Komponente aufgenommen werden kann.

Antwort

1

Tags in Körper oder Vorlagen von Meteor nicht ausgeführt werden, werden sie analysiert und dann durch Meteor Template-System abgewickelt. versuchen Sie jQuery GetScript-Funktion:

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'); 
} 
+0

Beachten Sie, dass dies das Skript nie zwischenspeichern wird – Gwened

Verwandte Themen