Refer to an object in Edge from an onclick="" in a .html file loaded into an iFrame in the animation

Question

HI, I am trying to figure out the Edge hierachies by stumbling my way through coding reference attempts. I've hit a wall...
How can I refer to an object and a global function in my Edge animation from an onclick=""  located in an .html file loaded into an iFrame created within the master/parent Edge animation. Here's what I have...
My main index.html is an Edge animation. One object <div> is a box created within Edge. I have added an iFrame with the Edge code:
sym.$("MenuPanelScreen").html('<iframe src="list_images_cemetery.html" width="267" height="670" sandbox="allow-same-origin allow-scripts allow-top-navigation"></iframe>');
That .html file which loads into the iframe within the animation contains thumbnails in <a> tags and contain onclick="" statements that should call a function within the Edge file.
Eventually, I want the statements to read something like... onclick="changePic('Dragon.jpg', 'The Dragon', 'Saint and Worm')"
However, I had no idea how to reference the changePic() function in the Edge animation. So, just to figure out how to reference the parent animation from an html in an iFrame, I change the onclick="" statements to...
<a onclick="alert('Try to hide Nameplate'); sym.$('NamePlate_sym').hide();" >  <img src="gallery/TheyGaveUpTheirDead.jpg" width="80" alt="Angel and Worm" /></a>
I first wanted to see if I could hide an Edge Symbol or div/element from the child html. I tried the following...
onclick="alert('Try to hide Nameplate'); sym.$('NamePlate_sym', window.parent.document).hide();"
I tried a few other variations that I won't bore you with. Can someone help me with the proper reference to effect an Edge element?
Furthermore, I eventually wnat the onclick="" statement to reference a global function on attached to the Edge stage in the compositionReady event of the stage. The function is...
window.changePic=function(myFileCurr, myLabelCurr, myDescriptionCurr) {
alert("in changePick");
  document.getElementById("myImage").src="gallery/"+myFileCurr;
  document.getElementById("myImageLabel").innerHTML=myLabelCurr;
  document.getElementById("myImageDescr").innerHTML=myDescriptionCurr;
I hope someone can point me in the right direction. Please forgive my ignorance. i am just getting back into coding and learning the intricacies of Jscript and jQuery. Thanks!

Answer 1

Hi again Elaine,
I actually had some success after many attempts with using your code. I can control the .stop() and .play() of the "NamePlate_sym" symbol. Yet, I am still having trouble doing anything else with it. I cannot .hide() it, nor use .html("Change text") on another element on the stage called"Rectangle". If I can accomplish that and all a global function on the stage, I'm in good shape.
I placed the following script in the header of the .html file that gets loaded into the iFrame within the Edge composition:
  <script type="text/javascript">
   window.parent.AdobeEdge.bootstrapCallback(function(compId) {
   comp = window.parent.AdobeEdge.getComposition(compId).getStage();
   alert("CompID is "+compId);
   var symbol = document.createElement('div');
   symbol.innerHTML = 'Rotate';
   symbol.style.cssText = 'background-color:#fea; width: 50px; text-align: center;';
   symbol.style.cursor = 'pointer';
   symbol.onclick = function() {
    if (comp.getSymbol("NamePlate_sym").isPlaying()) {
     comp.getSymbol("NamePlate_sym").stop();
    else {
     comp.getSymbol("NamePlate_sym").play();
   window.parent.document.body.appendChild(symbol);
        </script>
Once I put window.parent. in the first two lines of code and the last, my test worked. As I mentioned earlier though, I still can't get the syntax correct to .hide() an element (i.e. comp.getSymbol("NamePlate_sym").hide(); does not work), or more importantly, change the innerHTML value of an element on the stage. The code either does nothing or freezes.
Thanks... Tommy