0 Favourites

How can I include and use a Javascript Library?

  • I want to make use of a javascript library that's fairly easy to use (just include the script, then call a few functions). I'm not sure how to do that in C2 without making a plugin. I find the Execute Javascript action in the browser plugin but that's as far as I've gotten.

  • Invlude the file in the files for C2.

    Use Execjs and stadard JS called to insert a new script into the document.head

    then use execjs to call the api

  • Construct 3

    Buy Construct 3

    Develop games in your browser. Powerful, performant & highly capable.

    Buy Now Construct 3 users don't see these ads
  • Perfect, thanks! One more question, what is the path to the files uploaded to C2?

    EDIT: Also, can I access variables made in JS in C2 expressions? I'm not quite sure I understand how the Browser.ExecJS works in terms of what it returns. E.g. if in that JS I assign some JS var variable1 to something how can I access it or return it?

  • Hmm almost there but not quite working. So far I have this:

    var loader = document.createElement('script');  
    loader.type='text/javascript';  
    loader.src = 'myscript.js';  
    document.getElementsByTagName('head')[0].appendChild(loader); "[/code:1an8idce]
    
    in an execJS action.  When I do this 'myscript.js' shows under Sources in chrome dev tools.
    
    Next, I try to use the function FunctionA from the library in a browser ExecJS expression, but I get "Reference error: FunctionA is not defined"
    
    What am I doing wrong?
  • Looks like it's because it takes a while for the js script to load, and the C2 action does not wait for that to happen prior to calling FunctionA. A 'Wait' as a sloppy workaround works, but is there a better method?

  • I don't think you can have a trigger in C2 "on load" for this.

    But you could, after the first execJS action where you happen the script, activate a group in C2. This group would just have one event, a condition checking in the FunctionA is defined. Once this event gets triggered (aka the library is loaded), you can call a function in your events that will handle the next steps, and un-activate this group.

    Or you could have your external script do an action on load, like simulate a click on a button. If you added this button in C2 (setting an ID, making it invisible), the event "onclick" (the C2's one, in the event sheet) should be triggered.

  • Use ajax to load js file, then you could get js code string at "On completed" triggers , does it work?

  • I don't think loading a js files works with ajax, it needs to be included as a script. I'm not sure how to do that with ajax. The method I'm using now injects it into the document header as a script.

    I'll see if there's a way to check if a function exists with JS though, that might work.

  • If you retrieve the string from the js file using Ajax, you can execJS this script and it will immediately be usable.

    To check if a function is defined, typeof(myFunction) == "undefined" should do the trick.

    Rexrainbow's solution is better than mine though, you should try it this way.

  • So just to clarity, Request File with Ajax, On Request Complete, ExecJS('myscript.js')? I don't think I quite understand how to set up Ajax correctly with this. Could you be a little bit more explicit? I appreciate the help.

  • You've got it, but it's On AJAX complete -> execJS(Ajax.LastData)

    I'm not on my computer right now, I'll add an example later.

  • Don't need one, I get what you're saying. I'll try it in a bit and report back. Thanks!

  • So I finally got back to this. The AJAX thing doesn't work unfortunately, but just having a condition with "Compare two values" with one value being (typeof functionname == 'function' ) and the other being 1 works pretty well.

Jump to:
Active Users
There are 1 visitors browsing this topic (0 users and 1 guests)