How do you call functions from the root html file?

This topic contains 11 replies, has 2 voices, and was last updated by Yuri Kovelenov 2 months, 3 weeks ago.

Viewing 12 posts - 1 through 12 (of 12 total)

Author

Posts

2018-09-14 at 10:35 pm #7286

Customer

Hi I’ve got my my_awesome_app.html file targeted inside an iframe, and I can externally call functions if I place them on the html file itself in between <script></script> tags.

My question is what do I place in
function myfunction() { ? } to call the actual functions that are in the my_awesome_app.js in order to trigger events?

Thanks.

2018-09-15 at 8:30 am #7301

Yuri Kovelenov

Staff

Hi,

If you’d like to call your functions from the global namespace, you can use the window namespace, something like this:

window.myfunction = function() {}

This declaration can be placed anywhere in the app’s js file.

Founder & CEO at Soft8Soft
LinkedIn | FB | Twitter | VK | 新浪微博

2018-09-15 at 4:02 pm #7335

tidlybit

Customer

Hi Yuri,
Thanks for your reply.

So what I’d like to trigger is this function from my visual_logic.js:

function do_something() {
  changeVis("Cube", false);
  registerTimeout(5, function() {
    changeVis("Cube", true);
  });
}

function do_something() {

changeVis("Cube", false);

registerTimeout(5, function() {

changeVis("Cube", true);

});

}

Can I place something like this in my visual_logic.js?

window.myfunction = function() {
    do_something();   
}

window.myfunction = function() {

do_something();

}

…or am I way off?

I am able to call a myfunction() successfully if it’s on the html this way.

var iframeElements = document.getElementsByTagName("iframe");
iframeElements[0].contentWindow.myfunction();

1 2	var iframeElements = document.getElementsByTagName("iframe"); iframeElements[0].contentWindow.myfunction();

Sorry, I’m an instructional designer, with limited JS but Love what you guys have done and see so much educational potential in it. It really IS amazing. -Rick

2018-09-15 at 4:21 pm #7336

Yuri Kovelenov

Staff

In this case you can use the following puzzles for interacting with your code:

https://www.soft8soft.com/docs/#manual/introduction/Puzzles.call_JS_function
https://www.soft8soft.com/docs/#manual/introduction/Puzzles.when_called_from_JS

… and the functions should be registered in ExternalInterface in your app js file – see the examples by the above links

Founder & CEO at Soft8Soft
LinkedIn | FB | Twitter | VK | 新浪微博

2018-09-18 at 1:27 am #7417

tidlybit

Customer

Hi Yuri,
Thanks, I am now able to call a function from my index.html to my_function.js

however..

function runCode(app) {
    app.ExternalInterface.myJSCallback();
}   
window.myfunction = function() {
    window.alert("myFunction called from index.html playH() now works !" );
    // how do I call myJSCallback() from here?
}

function runCode(app) {

app.ExternalInterface.myJSCallback();

}

window.myfunction = function() {

window.alert("myFunction called from index.html playH() now works !" );

// how do I call myJSCallback() from here?

}

I have 2 questions:
1. How do I call myJSCallback() from window.myfunction
2. the runCode() seems to initially play the puzzle upon loading from line 83, is there way to prevent this?

Attachments:

You must be logged in to view attached files.

2018-09-18 at 7:20 am #7422

Yuri Kovelenov

Staff

Hi,

Just move myJSCallback to myfunction:

function runCode(app) {

}   
window.myfunction = function() {
    window.alert("myFunction called from index.html playH() now works !" );
    // how do I call myJSCallback() from here?
    app.ExternalInterface.myJSCallback();
}

function runCode(app) {

}

window.myfunction = function() {

window.alert("myFunction called from index.html playH() now works !" );

// how do I call myJSCallback() from here?

app.ExternalInterface.myJSCallback();

}

Founder & CEO at Soft8Soft
LinkedIn | FB | Twitter | VK | 新浪微博

2018-09-18 at 10:33 pm #7479

tidlybit

Customer

Thanks that’s how I thought it should work, but when I tested it I only got the alert message.

However, when I place the function before the alert like this I don’t get the alert message either, which makes me think that it’s perhaps throwing an error.

  window.myfunction = function() {
    app.ExternalInterface.myJSCallback();
    window.alert("myFunction called from index.html playH() now works !" );  
}

window.myfunction = function() {

app.ExternalInterface.myJSCallback();

window.alert("myFunction called from index.html playH() now works !" );

}

What’s interesting is that “app.ExternalInterface.myJSCallback()” works in runCode(app) fine.
Thanks again Yuri for all the help. Any thoughts?

This reply was modified 2 months, 3 weeks ago by tidlybit.

2018-09-19 at 6:54 am #7490

Yuri Kovelenov

Staff

One note – myfunction must be called after a Verge3D app is initialized and a scene is loaded. You can check for errors in the browser console (shown with F12 on Windows).

Founder & CEO at Soft8Soft
LinkedIn | FB | Twitter | VK | 新浪微博

2018-09-19 at 1:33 pm #7545

tidlybit

Customer

So I am getting this in the console, and I’m pressing the button to make the call after the verge player loads.

<em>Uncaught ReferenceError: app is not defined
    at window.myfunction (my_function.js:184)
    at playH ((index):34)
    at HTMLButtonElement.onclick ((index):49)</em>

<em>Uncaught ReferenceError: app is not defined

at window.myfunction (my_function.js:184)

at playH ((index):34)

at HTMLButtonElement.onclick ((index):49)</em>

You can see it here http://www.richardleehill.com/call

I zipped the code below too. Thanks.

Attachments:

You must be logged in to view attached files.

2018-09-19 at 1:45 pm #7547

Yuri Kovelenov

Staff

Sorry, my bad, here is how it should be

function runCode(app) {

    window.myfunction = function() {
        alert("index.html function playH(); called this " );
        app.ExternalInterface.myJSCallback();
    }

}