User Tag List

Page 1 of 2 1 2 LastLast
Results 1 to 10 of 16

Thread: example of how to call javascript function in HTML5 runtime

  1. #1
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export Module

    Join Date
    Jan 2010
    Posts
    538
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    example of how to call javascript function in HTML5 runtime

    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

  2. #2
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export Module
    jn2002dk's Avatar
    Join Date
    Mar 2014
    Posts
    217
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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

    Code:
    <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

  3. #3
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export Module

    Join Date
    Jan 2010
    Posts
    538
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export Module

    Join Date
    Jan 2010
    Posts
    538
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  5. #5
    Clicker Fusion 2.5 MacFusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleInstall Creator Pro

    Join Date
    Dec 2010
    Location
    United Kingdom
    Posts
    961
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:
    Code:
    <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.

  6. #6
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export Module

    Join Date
    Jan 2010
    Posts
    538
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  7. #7
    Clicker Fusion 2.5 MacFusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleInstall Creator Pro

    Join Date
    Dec 2010
    Location
    United Kingdom
    Posts
    961
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  8. #8
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export Module

    Join Date
    Jan 2010
    Posts
    538
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?

  9. #9
    Clicker Fusion 2.5 MacFusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleInstall Creator Pro

    Join Date
    Dec 2010
    Location
    United Kingdom
    Posts
    961
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You can modify index.html or transfer the essential code needed to run the HTML5 application:

    Loading the runtime
    Code:
    <script src="src/Runtime.js"></script>
    Somewhere to display
    Code:
    <canvas id="MMFCanvas" width="640" height="480">
        <p>Your browser does not support Canvas.</p>
    </canvas>
    Starting the runtime
    Code:
    <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>.

  10. #10
    Clicker Fusion 2.5 DeveloperAndroid Export ModuleHTML5 Export ModuleiOS Export ModuleSWF Export Module

    Join Date
    Jan 2010
    Posts
    538
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?

Page 1 of 2 1 2 LastLast

Similar Threads

  1. Java Script commands call from HTML5 runtime!
    By crayzorechos in forum HTML5 Export Module 2.5
    Replies: 15
    Last Post: 18th July 2014, 10:31 AM
  2. calling a function FROM page javascript
    By Chokito in forum HTML5 Export Module 2.5
    Replies: 1
    Last Post: 28th March 2014, 05:01 AM
  3. PHP to Java Socket within JavaScript Function call
    By mogg49 in forum SWF/Flash Export Module Version 2.0
    Replies: 4
    Last Post: 25th November 2010, 08:39 PM
  4. Help with calling a Javascript function
    By Steven in forum SWF/Flash Export Module Version 2.0
    Replies: 12
    Last Post: 4th August 2010, 09:03 PM
  5. Javascript call with JS Object as parameter
    By netninja in forum SWF/Flash Export Module Version 2.0
    Replies: 2
    Last Post: 19th July 2010, 03:49 PM

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •