1. #1
    Sencha User
    Join Date
    Nov 2011
    Posts
    5
    Vote Rating
    0
    xamtur is on a distinguished road

      0  

    Default How call a Javascript function declared inside an iframed html document

    How call a Javascript function declared inside an iframed html document


    Hi,
    I need to call a specific function inside an iframed html document stored in the assets folder
    The function will act just inside the iframed html document (no need to store returning values).
    My function is declared in the head section of the iframed html document.
    I need to call this function every time the iframed html document is shown during the animation.
    How and where I have to place such this call in my animation project?

    Regards,
    Max

  2. #2
    Sencha - Architect Dev Team
    Join Date
    Apr 2012
    Posts
    287
    Vote Rating
    24
    miro.bojic will become famous soon enough miro.bojic will become famous soon enough

      0  

    Default


    Hi Max,

    Assuming that the iframe is shown at the beginning of a scene, and that you have given it a name under object properties -> general -> id, you can add following JS line under scene properties -> actions -> start

    Code:
    controller.getElementById('myIframeId').contentWindow.myFunction();
    In the code above replace myIframeId with the id you gave to your iframe and myFunction with the name of the function you want to call.

    This will trigger every time the scene is started.

    Please note that this will only work as long as the document inside your iframe is hosted on the same domain as your main document. This means that it will not work even offline when you preview it due to cross-domain security that is built-in inside all modern browsers - to test it you will have to upload both the main document and the iframe document on the same server.

  3. #3
    Sencha User
    Join Date
    Nov 2011
    Posts
    5
    Vote Rating
    0
    xamtur is on a distinguished road

      0  

    Default


    Very nice but,
    there's a problem: the name I give under object properties -> general -> id is assigned to the id of the div, not to the id of the iframe inside the div.
    So in order to apply the suggested solution I need to edit the exported index.html file:


    BEFORE (original exported index.html - not working code):
    Code:
    <div id="myIframeId"><iframe src="assets/01/index.htm"></iframe></div>

    AFTER (edited index.html - working code):
    Code:
    <div id="an-obj-15"><iframe id="myIframeId" src="assets/01/index.htm"></iframe></div>

    I also have another problem:
    often the iframes are not placed at the beginning of the scene, so I guess I cannot use the code that you have proposed under scene properties -> actions -> start.

  4. #4
    Sencha User
    Join Date
    Nov 2011
    Posts
    5
    Vote Rating
    0
    xamtur is on a distinguished road

      0  

    Default


    I found a solution to overcome the problem of the ID that points to DIV instead of "iframe":


    Your code (JS line under scene properties -> actions -> start)
    Code:
    controller.getElementById('myIframeId').contentWindow.myFunction();

    Modified and working code (JS line under scene properties -> actions -> start)
    Code:
    controller.getElementById('myIframeId').querySelector('iframe').contentWindow.myFunction();

    So the only problem that remains to be solved is that often mine iframes are not placed at the beginning of the scene, so I guess I cannot use the code that you have proposed under scene properties -> actions -> start.

  5. #5
    Sencha - Architect Dev Team
    Join Date
    Apr 2012
    Posts
    287
    Vote Rating
    24
    miro.bojic will become famous soon enough miro.bojic will become famous soon enough

      0  

    Default


    If your iframes come into scene at a later point in the timeline, and this is triggered with a user action (i.e. a mouse click somewhere), you should play that code when the user action occurs. For example, if you created a button that when pressed will show your iframe, then put the code in the mouseclick trigger of the object that you configured as a button.

    If you are simply playing an animation without any user action, you can setup a timer at the beginning of the scene (still in 'start' action) that will call the code at the right moment in the timeline. Say, if you want your iframe to execute the function when your animation is at 10s in the timeline, set the timer as follows:

    Code:
    var timerReference = setTimeout(function(){
        controller.getElementById('myIframeId').querySelector('iframe').contentWindow.myFunction()
    }, 10000); //in ms
    This method is not 100% accurate, because when timer is started in practice will vary a little depending on how different elements on the page load, but it should come pretty close.

Thread Participants: 1

Tags for this Thread