retrieving global variable from another iframe

Home Forums Programming retrieving global variable from another iframe

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • #24765
    GlifTekGlifTek
    Licensee

    hi,
    this is driving me nuts. hope someone can help…

    I’ve designed my index.html file to have my verge3d container in a div not iframe.

    within my puzzles network, I’m using html puzzles to create a draggable panel div with jquery ui.

    within that i have sliders made with my html puzzles.. that control my verge object.
    works perfect.

    got the verge3d environment filling the window, and a draggable control panel controlling the objects..

    so, to spice things up, i’ve made a new batch of fancy animated sliders and buttons through Adobe Animate CC.
    it uses create.js/easel.js to make an HTML5 canvas stage.

    so now to implement it (and replace) the old sliders.. I’ve put an iframe before the original sliders div into the draggable panel, and src’d the Animate exported html into it.

    now they’re both in the panel one on top of the other(on the y not z)
    .. the original works fine.. but not the top..

    i havent connected the NEW slider’s values yet.

    what i’m doing is having the slider’s authored JS create a global variable (for now (testVarVar).. in the Adobe Animate JS authoring environment.

    that code looks like this:

    and it’s console printout is working fine.

    trying to get the Verge3D to listen for it i’ve tried a number of ways.. but i just couldn’t find the right puzzles to get it’s value so i made a call JS that looks like this..

    now i know that just that won’t work.
    i left it blank because i tried all these ways of referencing testVarVar…
    this.testVarVar, window.testVarVar, document.testVarVar, window.document.testVarVar, exportRoot.testVarVar

    no dice … just can’t get Verge3D’s js to see the variable at all.

    Adobe Animate help and create.js forums/docs all go on to talk about exportRoot being the root of the create.js scope that supposedly is accessible from external querys. Adobe Animate Canvas Movieclip Hierarchy

    maybe i’m not declaring that testVarVar variable in the right place or right manner? “this” should be defining it on the window level scope right? that’s accessible to Verge right?
    Scope and ‘this’

    i need to get past this, it’s been 2 days…
    :negative:

    thanks!

    #24771
    Yuri KovelenovYuri Kovelenov
    Developer

    Hi,

    The “this” in the line

    this.testVarVar = that.parent.sliderTrack_MC.testVar.text;

    likely relates to an instance of some JavaScript Object (class), implemented by Adobe Animate.

    Instead of “this”, you might try “window” so that the variable becomes global.

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #24777
    GlifTekGlifTek
    Licensee

    Hi,
    The “this” in the line
    this.testVarVar = that.parent.sliderTrack_MC.testVar.text;
    likely relates to an instance of some JavaScript Object (class), implemented by Adobe Animate.
    Instead of “this”, you might try “window” so that the variable becomes global.

    yea no see i tried that.

    are you sure verge is ABLE accept or get global variables??

    this isn’t the first time ive struggled on this for a long time..last time was about a week.. and i decided to give up on it out of frustration and go a completely different route because i couldn’t get verge to simply exchange variables between another window.

    do you know where a good example of this happening in the examples where i can look at the exact code at the sending and receiving end and compare it to what i’m doing?? like literally seeing it function live.

    thnnxx

    #24779
    Yuri KovelenovYuri Kovelenov
    Developer

    Feel free to share a sample project that exhibits the issue.

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #24783
    GlifTekGlifTek
    Licensee

    uuuuhhhhgg!!! wOOOO!

    fixed it with just using window.parent.testVarVar = that.testVarVar;
    (“that” is “this”)

    then the js call return window.parent.testVarVar.

    alrighty then…

    onwards! :yahoo:

    #24784
    GlifTekGlifTek
    Licensee

    another thing.. in doing the opposite…
    i got variables FROM the adobe controls TO the verge window..
    but now..

    to make variable in the verge window accessible globally for the Adobe controls to get…

    i set a JS call saying…
    window.parent.testVarVarBack = testVarVarBack;
    (where testVarVarBack is a defined puzzle variable in verge…

    doesn’t work..

    is there a puzzles way that can do this better? or a bettwe way? do i have to use get elementbId ? i tried.. it came up undefined.

    thanks.

    EDIT: fixed.. just had to send the variable with the JS call, dur.

    #24785
    Yuri KovelenovYuri Kovelenov
    Developer

    glad you worked it out! :good:

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #25017
    GlifTekGlifTek
    Licensee

    glad you worked it out! :good:

    Re-reading this and you had already recommended I use window.parent..woops..didn’t understand how you were suggesting, which was pretty straight forward..

    Having an issue with this again.
    The only way I can access the window.parent.variables LIVE in puzzles is to have a procedure running the “every frame” puzzle with my “call js” puzzle that updates my puzzle variable to what the window.parent one is, whether the variable is changing or not.
    (This variable is the value of a custom control changed often)

    This method is a performance hog right? I tried the “has html element changed” for the window.parent value but no dice…
    I CAN do something in my “run your script here” section of myApp.js file… But how do I refer to my puzzles variables in that section?
    Is there something I should precede puzzle variables I want to change from there with? document.container.puzzleVar etc??

    P.s. in going to try what you showed user jstubb with the contentWindow approach over here –> Unable to Reference Updated Global Object From External Interface

    • This reply was modified 3 days, 13 hours ago by GlifTekGlifTek.
    #25019
    GlifTekGlifTek
    Licensee

    If I wrote a MutationObserver in my my app.js to check if the window.parent.variable has changed, I’d have the v3d. procedure (call a puzzle procedure) and have that puzzle run my jscall that gets the value(in posts above).. That would work, but.. Is there a way to just. Cut out the middle man and call the app.ExternalInterface (my js call) right from there instead of going back to the puzzle procedure then to do that?

    Thanks.

    #25044
    Yuri KovelenovYuri Kovelenov
    Developer

    Hi,

    This method is a performance hog right?

    if you just setting a variable and do just some simple operations then it is ok for each frame

    app.ExternalInterface (my js call) right from there instead of going back to the puzzle procedure then to do that?

    sure you can use v3d.apps[0].ExternalInterface namespace to call it from anywhere

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #25058
    GlifTekGlifTek
    Licensee

    ok thank you very much for your answers!

    anything on the specifics of prefacing syntax for setting a variable that’s in puzzles FROM the “run your code here” part of myApp.js ?

    #25070
    Yuri KovelenovYuri Kovelenov
    Developer

    there is no direct access to puzzles variables from outside (which is considered a good thing by some), but you can implement ‘getter’/’setter’ procedures and call them instead

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

    #25095
    GlifTekGlifTek
    Licensee

    this post keeps disappearing when i edit it.

    ‘ok i had assumed that about puzzles variables for security.

    good news…
    for anyone who reads this later here’s some info:
    (ad this is super important info if you’re in need of your code communicating between sibling iframes and/or the parent document.

    I’m activating verge’s container content through the html5 controls now.
    my verge3d is in a div not an iframe, but i have a control panel for the verge3D objects in a separate iframe (a stack of custom html5 canvas range sliders).

    to call puzzle procedures in the parent window with the verge3d div FROM the iframe’s js file i’m using:
    parent.v3d.puzzles.procedures.testFire(); (example)

    to run a function in the “run your code here” part of the myAwesomeApp.js (your project’s js) file i did
    this in the iframe’s js:
    window.parent.testFire();

    with this in the “run your code here” part:

    and vice versa to call a function in the iframe from the parent (my verge3d container in the parent doc)

    example:
    my parent doc has this:
    document.getElementById('sliders_panel_iframe').contentDocument.functionToFire();

    which calls this from the iframe window with the Adobe Animate CC HTML canvas :
    document.functionToFire = function(){ console.log("functionToFire fired"); };

    (not sure about how to access the app.ExternalInterface.someJScallFunction();
    functions though externally.. maybe name a window.parent.variable to the externalinterface function?)

    now i can control when the variables are updated between them instead of having it do it every frame, (which was causing some issues when that’s all that was in the functionality)

    so with a little help..
    I’m “Glad I worked it out” :good:
    thanks! :yes:

    • This reply was modified 1 day, 10 hours ago by GlifTekGlifTek.
    #25097
    Yuri KovelenovYuri Kovelenov
    Developer

    not sure about how to access the app.ExternalInterface.someJScallFunction();
    functions though externally..

    try this one:
    v3d.apps[0].ExternalInterface.someJScallFunction()

    3D Verger, the CEO
    LinkedIn | FB | Twitter | VK | 新浪微博

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

You must be logged in to reply to this topic.