example of how to call javascript function in HTML5 runtime

[brett]

Hi,
I am trying to find out if there is a way to communicate between my iframe embedded html5 app and the page it is located in. I am thinking that using the call javascript function feature of the HTML5 object might be the way to do this, but I haven't found any examples of how to do this. I'd appreciate any insight or examples of how this might work. Thanks,
Brett

[jn2002dk]

The HTML5 object has a call javascript action where you set the name of the function you want to call

Then you make the javascript function like this

<header>
<script type="text/javascript">
function games()
         {
            var el = document.getElementById('ifrm');
				el.src = 'games.html'; 
         }
</script>
</header>

In this case the function loads the page games.html into the iFrame named ifrm when called

[brett]

Hi jn20002dk,
Thanks for the reply. How do you call this function in Fusion 2.5? What do you put in the dialog box if the function is on a parent page that the html5 app is embedded in? I got an error when I just put in the function name. For example, the function name in your example I would think to be "games". Is this correct? I also tried "parent.games" thinking that that might call the function from the parent page. Both caused an error. I appreciate your help as I've never used this aspect of html5 before. Thanks,
Brett

[brett]

Hi,
I am trying to call the following function from my webpage with no success:
<!--comment: javascript for button to SET scroll position STARTS BELOW-->

<script>
function myFunction() {
document.body.scrollTop = 100;
}
</script>
<!--comment: javascript for button to SET scroll position ends above-->

It is contained in the head section of the webpage that my html5 app is embedded in (with an iframe)

In Fusion, I've tried to call the function when clicking a button as follows:
1. If button is clicked
then
2. Call Function "myFunction()" or I've also tried Call Function "myFunction"

Neither works. Instead it triggers an error. I know there is an error because I have a condition set in Fusion as follows: "On error: set alterable string to 'error'"
I am not sure why and I'm not getting any specifics on the error in Firebug or Chrome.

Here is the webpage: https://quizninja.net/studentquizpagedesktoptest.html
You will need to get to the quiz portion to see the problem
You can use the following e-mail address as the teacher e-mail: bbaughman@tvusd.k12.ca.us
Choose any quiz.
Once on a quiz, if you answer a question and click "confirm answer" you will see a "next question" button. When you click this I want to trigger the function but it does not. Instead you will see the word "error" in red.
Does anyone know what is wrong about this? Thanks,
Brett

[lh37]

Hi Brett, your events would work in theory, but after taking a peak at the page's source -- your function is in the parent page (studentquizpagedesktoptest.html) instead of desktoptest/index.html - I don't think Javascript is shared with the iframe, it is not being executed.

There's a few choices here.

1) Try adding parent. before the function's name when you call it in the HTML5 object.

2. Move the function to index.html instead, be careful that Fusion doesn't overwrite index.html if "Generate index.html" is checked!

3) Alternately, create an external JS file and include it like so:

<script src="myScript.js"></script>

It might be possible adding seamless to the iframe's tag, but I haven't tested or looked it up in its documentation if that would work.

[brett]

Hi lh37,
I tried adding parent. to the functions name in Fusion as follows:
"parent.myFunction()"
or
"parent.myFunction"

Neither seemed to work. I still get the error message. I am thinking that moving the function to index.html might not work since I want the parent page to scroll. Am I right about this?
How would it work to include an external JS file if I want the parent page to scroll? Is there a way to reference the page that needs to scroll?
Thanks,
Brett

[lh37]

You'd be right about the iframe unable to scroll the parent, and that situation did cross my mind. Personally I'd ditch the <iframe> and integrate the runtime using <div>'s and using CSS to define the formatting/layout.

For your second question, I was looking at the perspective of keeping the code external to index.html in case Fusion or human error overwrites the JavaScript. Keeping it embedded would be fine, it wouldn't be possible to have them both linking the file, since JavaScript is still independent to one another.

The problem here is the restricted communication between the parent and the embedded page (iframe), hence why I think removing the iframe and merging code from into one page will allow the runtime to call the JavaScript.

[brett]

Hi lh37,
I didn't think I could integrate the runtime with divs. Are you meaning that I should just modify the generated index.html file? Or is there another way to embed this file in the webpage?

[lh37]

You can modify index.html or transfer the essential code needed to run the HTML5 application:

Loading the runtime

<script src="src/Runtime.js"></script>

Somewhere to display

<canvas id="MMFCanvas" width="640" height="480">
    <p>Your browser does not support Canvas.</p>
</canvas>

Starting the runtime

<script>
        // RUNTIMESTART
	    // This is where the HTML5 runtime is actually started
	    window.addEventListener("load", windowLoaded, false);
	    function windowLoaded()
	    {
	        // Calls the runtime
	        // First parameter : name of the canvas element
	        // Second parameter : path to the cch file. Images and sounds must lay beside this file
	        new Runtime("MMFCanvas", "resources/test.cch");
	    }
	    // RUNTIMESTARTEND
    </script>

(Of course, modify the paths to point to your project)

Tried & tested - Most of the remaining code is for the layout/formatting or code to check it's not being accessed from a local file system - In your case, you can copy these pieces over to your main page and replace the <iframe> with the <canvas> - No more embedded pages, no more JavaScript issues.

The next task would be to adjust your CSS so it'll be responsive to the <canvas>/<div> instead of the <iframe>.

[brett]

Thanks for the info. Are there best practices for where in the page I should put the scripts? Should they all go in the head of the page, for example?