Send event to top level document from a frame?

Question

I'm working with legacy code and trying to add a jQuery onClick trigger to the top level parent document, but I can't seem to get it working. I'm honestly not sure how many frames deep this element will go.

This is a sub section of the web app from 1996-1999. Throughout the rest of the app clicking the button triggers a jquery-ui modal.

I have tried

<img id="help-button" 
     data-pagehash="Need This" 
     onclick="$('#help-button', parent.document).click()" 
     src="stuff" />

And

      onclick="window.parent.$('#help-button').trigger('click')" 

But neither are working and neither are throwing errors. I'm not really sure what else to do. I really don't have much experience working with frames and since they are mostly antiquated, information on them is slim.

I also need to send the data attribute to the top level parent, if that makes a difference. I'm not sure if that is passed with the DOM object or not.

Answer 1

I'm in the same situation with a legacy app. Window.top will get you to the top level document if you are nested more than one deep, then you should be able to navigate down to the proper frame. To get your data attribute value use onclick="window.top.frames[0].$("#help-button").trigger('click', [this])" to pass the current button/image as an additional argument. Then you can grab the data from the top level binding like this:

$("#help-button").on("click", function(e, additionalArgs) {
   var data = 'some default value';
   if(additionalArgs) {
      data = $(additionalArgs).data('pagehash');
   }

   $("#dialog").text(data).dialog();
}); 

The additionalArgs value will be ignored for normal click events.