How do you call functions from the root html file?

This topic has 11 replies, 2 voices, and was last updated 4 years, 6 months ago by Yuri Kovelenov.

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

Author

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

dssctr
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.

Chief 3D Verger | LinkedIn | Twitter

2018-09-15 at 4:02 pm #7335
dssctr
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);
  });
}
```
Can I place something like this in my visual_logic.js?
```
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();
```
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

Chief 3D Verger | LinkedIn | Twitter

2018-09-18 at 1:27 am #7417
dssctr
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?
}
```
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?
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();
}
```
Chief 3D Verger | LinkedIn | Twitter
2018-09-18 at 10:33 pm #7479
dssctr
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 !" );  
}
```
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 4 years, 6 months ago by dssctr.
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).

Chief 3D Verger | LinkedIn | Twitter

2018-09-19 at 1:33 pm #7545
dssctr
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>
```
You can see it here http://www.richardleehill.com/call

I zipped the code below too. Thanks.
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();
    }

}
```
- This reply was modified 4 years, 6 months ago by Yuri Kovelenov.
Chief 3D Verger | LinkedIn | Twitter
2018-09-19 at 8:01 pm #7553
dssctr
Customer
Thankyou! I’ve got it working and talking to LMS software….
- This reply was modified 4 years, 6 months ago by dssctr.
2018-09-20 at 7:42 am #7556

Yuri Kovelenov
Staff

Chief 3D Verger | LinkedIn | Twitter
Author

Posts