Adding External Javascript file on head tag html5 target

RonTek · June 20, 2017, 10:24:37

I would like to add some external scripts on the <head> tag on my build. It seems using

QuoteImport "extern.js"

does not work. I got the js file alongside my monkey source. Ideally something like this..

Quote<html>
<head>
<script src="extern.js"></script>
...
</head>
...

How does this actually work with Monkey?

Xaron · June 20, 2017, 11:32:30

When you have access to that js file (local) you can import it in your Monkey code like:

Code Select


#if TARGET="html5"
  Import "externalfile.js"
#end

Probably you have not, so you have to add:

Code Select


var head = document.getElementsByTagName('head')[0];
  var script = document.createElement('script');
  script.type = 'text/javascript';
  script.src = "linktoyourexternalscript.js";
  head.appendChild(script);

This will add it to the header. You need a custom js file for that of course. I did it once for pusher:

Code Select


XPusher.prototype.init = function( appKey, authURL )
{
  // add the pusher dependency to the html file
  var head = document.getElementsByTagName( 'head' )[0];
  var script = document.createElement( 'script' );
  script.type = 'text/javascript';
  script.src = "https://js.pusher.com/2.2/pusher.min.js";
  head.appendChild( script );

  script.onload = function()
  {
    _pusher = new Pusher( appKey, { authTransport: 'jsonp', authEndpoint: authURL } );
    _pusher.connection.bind( 'error',
      function( err )
      {
        _eventList.push( new Event( PUSHER_RESULT_ERROR, err.data.code, '', '', '' ) );
      }
    );
    _pusher.connection.bind( 'state_change',
    function( states )
    {
      _eventList.push( new Event( PUSHER_RESULT_STATE_CHANGE, 0, '', '', '' ) );
    }
  );
  _channels = new Array();
  _eventList.push( new Event( PUSHER_RESULT_OK, 0, '', '', '' ) );
};
}

RonTek · June 20, 2017, 11:51:36

Thanks Martin. I'm getting this 404 not found when adding the "linktoyourexternalscript.js". I tried putting it alongside the extern.js file and also inside my game.data folder.

Is this supposed to overwrite the existing MonkeyGame.html template? It seems that template html is fixed and cannot be modified during build..

Xaron · June 20, 2017, 12:10:43

Can you post a working short example where you want to include js code? Would be nice if you could attach it.

RonTek · June 20, 2017, 12:22:57

Ok please see attached, thanks.

Xaron · June 20, 2017, 13:16:49

Hey Ron,

here's a working example how to wrap your own js script into Monkey.

RonTek · June 20, 2017, 14:03:11

Thanks Martin, this really helps a lot.

Another thing that I would like to know is how to add external or 3rd party javascripts like jquery.js or google analytics scripts. Is there a way to add it on the head tag like

Code Select

<script src="http://cdn.jquery.com/jquery-1.x.x.js"></script>

or is the template just static and you have to modify or create a custom page to insert it?

Xaron · June 20, 2017, 14:07:34

In that case take that mytest.js from my zip and change it to:

Code Select


function ExtMyTest()
{
}

ExtMyTest.prototype.myconsolelog = function()
{
  // add the pusher dependency to the html file
  var head = document.getElementsByTagName( 'head' )[0];
  var script = document.createElement( 'script' );
  script.type = 'text/javascript';
  script.src = "https://LINKTOYOUREXTERNALSCRIPT";
  head.appendChild( script );

  console.log( "hello" );
}

Obviously you should call this function myconsolelog only once then. This will add the external script dependency to your header.

RonTek · June 20, 2017, 14:19:02

Ah I see. I would really prefer a static script tag instead of dynamic insertion. I just thought the html5 template can be modified during build, that's all.

I see monkey copies the template during build, is there a way to do some templating, something like what's happening on the main.js if it uses some sort of templating and code replacement..

main.js

Code Select

//${CONFIG_BEGIN}
//${CONFIG_END}

//${METADATA_BEGIN}
//${METADATA_END}

//${TRANSCODE_BEGIN}
//${TRANSCODE_END}

Example:
MonkeyGame.html

Code Select

<title>${APP_NAME}</title>

Then

Code Select


<head>
${HEAD_CONTENT}
</head>
...

Xaron · June 20, 2017, 14:25:35

Well ya maybe you can insert it into the template. I did it dynamically because I did not want to change the template. Of course it should be possible to add it statically.

RonTek · June 20, 2017, 16:04:51

Thanks, that seems to be the best option.