Ooops
April 10, 2020, 11:44:14 AM

Author Topic: Adding External Javascript file on head tag html5 target  (Read 1418 times)

Offline RonTek

  • Sr. Member
  • ****
  • Posts: 357
Adding External Javascript file on head tag html5 target
« on: June 20, 2017, 10:24:37 AM »
I would like to add some external scripts on the <head> tag on my build. It seems using

Quote
Import "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?

Offline Xaron

  • Sr. Member
  • ****
  • Posts: 279
Re: Adding External Javascript file on head tag html5 target
« Reply #1 on: June 20, 2017, 11:32:30 AM »
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, '', '', '' ) );
};
}

Offline RonTek

  • Sr. Member
  • ****
  • Posts: 357
Re: Adding External Javascript file on head tag html5 target
« Reply #2 on: June 20, 2017, 11:51:36 AM »
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..

Offline Xaron

  • Sr. Member
  • ****
  • Posts: 279
Re: Adding External Javascript file on head tag html5 target
« Reply #3 on: June 20, 2017, 12:10:43 PM »
Can you post a working short example where you want to include js code? Would be nice if you could attach it. :)

Offline RonTek

  • Sr. Member
  • ****
  • Posts: 357
Re: Adding External Javascript file on head tag html5 target
« Reply #4 on: June 20, 2017, 12:22:57 PM »
Ok please see attached, thanks.  :)

Offline Xaron

  • Sr. Member
  • ****
  • Posts: 279
Re: Adding External Javascript file on head tag html5 target
« Reply #5 on: June 20, 2017, 01:16:49 PM »
Hey Ron,

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

Offline RonTek

  • Sr. Member
  • ****
  • Posts: 357
Re: Adding External Javascript file on head tag html5 target
« Reply #6 on: June 20, 2017, 02:03:11 PM »
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?

Offline Xaron

  • Sr. Member
  • ****
  • Posts: 279
Re: Adding External Javascript file on head tag html5 target
« Reply #7 on: June 20, 2017, 02:07:34 PM »
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.

Offline RonTek

  • Sr. Member
  • ****
  • Posts: 357
Re: Adding External Javascript file on head tag html5 target
« Reply #8 on: June 20, 2017, 02:19:02 PM »
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>
...

Offline Xaron

  • Sr. Member
  • ****
  • Posts: 279
Re: Adding External Javascript file on head tag html5 target
« Reply #9 on: June 20, 2017, 02:25:35 PM »
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.

Offline RonTek

  • Sr. Member
  • ****
  • Posts: 357
Re: Adding External Javascript file on head tag html5 target
« Reply #10 on: June 20, 2017, 04:04:51 PM »
Thanks, that seems to be the best option. :)

 

SimplePortal 2.3.6 © 2008-2014, SimplePortal