HTML5: Communication with Javascript

#1

Hey guys,

we are coming from a Flash-based project where we have an html page that includes Javascript and the Flash client. The Flash client can then call the Javascript functions defined in the main html page.

Now we are switching to HTML5 with OpenFL and the structure changes a bit because now OpenFL generates an index.html that we somehow have to include in our main html page and then make it possible to call Javascript functions from the index.html in our main html page.

Things are getting more complicated because we have different domains for our main html page and the domain our frontend is loaded from. I know there are a couple of ways to allow crossdomain communication between 2 documents, however first I wanted to ask if there is an OpenFL way of doing this that I might be missing.

Is there any best practice to load our game into an existing html page (not the one generated by OpenFL) to allow communication with existing Javascript methods?

Thanks in advance

#2

Probably first step is to include your custom html template.

#3

Here’s a good place to start:

openfl create BrowserExternalInterface
cd BrowserExternalInterface
openfl test html5

In addition to ExternalInterface (which works cross-platform between Flash and HTML5) you can also use JavaScript methods directly with externs or untyped JavaScript in Haxe, but for starters, check out this sample

1 Like
#4

Thanks, I think we are on a good track now. We are breaking apart the index.html generated by OpenFL to include it in our main html page so that the game and our Javascript context are embedded in the same page. For anyone else interested in this, there is a handy parameter in lime.embed to allow loading assets from a remote URL where the game files are located:

lime.embed ("maumau11", "flash_content", 0, 0, { parameters: config, rootPath: 'https://www.example.com/' });

We are now in the middle of debugging so I will come back later with the results.

Update: Yes it’s working fine :slight_smile:

1 Like