ExternalInterface and HTML5 target

Help
#1

How do I reference the OpenFL HTML5 app from within a HTML page?

In the Haxe/OpenFl code

if (ExternalInterface.available){
ExternalInterface.call(“getMyData”);
}

works and reaches the host HTML page function:

function getMyData() {

		// BUT how do I reference the OpenFL content to call a function back in the app???

}

Any help welcomed.

#2

If you haven’t changed the default div id

<div id="openfl-content"></div>

document.getElementById('openfl-content').getMyData();
#3

You can use @:expose to do that. Here is an example

@:expose("haxeFunction")
public static function myFunction(string:String):void
{
       trace(string);
}

Then somewhere in your js

 haxeFunction("test");
1 Like
#4

Thanks justnajm,

We’ve tried that but we get: “TypeError: undefined is not a function (evaluating ‘document.getElementById(‘openfl-content’).f_getTheData()’)”

The function in the HTML5 app is declared as:

public function f_getTheData():Void{

trace("Here");

}

Any thoughts?

#5

My javascript code in the html document

function startGame() {
		document.getElementById('openfl-content').restartKharchuToys();
}

My Openfl class code:

function onAddedToStage(){
    if (ExternalInterface.available) {
// second argument is for internal function name
        ExternalInterface.addCallback("restartKharchuToys", restartGame); 
    }
}
private function restartGame() {
    game_end = true;
}
1 Like
#6

OK - thanks for your help justnajm (& hcwdikk).

We have it working now by registering the public function with ExternalInterface in the OpenFl code.

#7

What does the final code look like?