Can't understand from the manual: how actually to run JS function from Java?

For example, I have a function in my html page:

<script type="text/javascript" language="javascript">
    function foo() {
        alert('Foo!');
    }
</script>

The following module shows two buttons, only second of which works:

public class Test_GoogleWeb_JSNI_01 implements EntryPoint {

public void onModuleLoad() {
    
    Button fooButton = new Button("Foo!");
    fooButton.addClickHandler(new ClickHandler(){
        public void onClick(ClickEvent event) {
            fooRunner();
        };
    });
    
    
    HTML fooButtonNative = new HTML();
    fooButtonNative.setHTML("<input type='button' value='Foo Native' onclick='foo()'>");
    
    RootPanel rootPanel = RootPanel.get();
    rootPanel.add(fooButton);
    rootPanel.add(fooButtonNative);
    
}

public static native void fooRunner() /*-{
  foo();
}-*/;
}

It is said in manual, that native functions implemented within nested frame, which explains the situation. But how to run JS functions then?

Can't understand from the manual: how actually to run JS function from Java?

For example, I have a function in my html page:

<script type="text/javascript" language="javascript">
    function foo() {
        alert('Foo!');
    }
</script>

The following module shows two buttons, only second of which works:

public class Test_GoogleWeb_JSNI_01 implements EntryPoint {

public void onModuleLoad() {
    
    Button fooButton = new Button("Foo!");
    fooButton.addClickHandler(new ClickHandler(){
        public void onClick(ClickEvent event) {
            fooRunner();
        };
    });
    
    
    HTML fooButtonNative = new HTML();
    fooButtonNative.setHTML("<input type='button' value='Foo Native' onclick='foo()'>");
    
    RootPanel rootPanel = RootPanel.get();
    rootPanel.add(fooButton);
    rootPanel.add(fooButtonNative);
    
}

public static native void fooRunner() /*-{
  foo();
}-*/;
}

It is said in manual, that native functions implemented within nested frame, which explains the situation. But how to run JS functions then?

UPDATE 1 The following works.

Java:

public static native void fooRunner() /*-{
  $doc.fooRunner();
}-*/;

JS:

<script type="text/javascript" language="javascript">
    document.fooRunner = function foo() {
        alert('Foo!');
    }
</script>

Is there a better way?