Events in JavaScript ( IFrame vs Parent Window)

Introduction

Event provides the way of interaction with user. It tracks the user activity and provides a developer the way to respond. In simple terms, Events are like a message which get raised automatically by the browser when user interact with web page/controls. These messages can be hooked to a script, which will run as an action/response to an interaction.

Background

Few weeks before, I was stuck with JavaScript event triggering, and the resolution of that was something new which I can't expect. I searched the web a lot, finally I came across this concept, then I thought that I should share my learning with the developer community.

I had web page and an IFrame inside that. Here, I can say the web page is a parent window and IFrame is a child window as it is inside the web page (i.e., HTML document). I am explaining my scenario briefly, so that I can bring you guys on the same page/Context of the problem.

Problem

In parent window (web page), I have flyout control which has a tree control which displays some hierarchical data. On page load, it picks the data from the service API and stores it to the browser cache, and then loads the tree control. So, whenever the flyout control is activated/visible, it renders all the controls inside it, so the tree controls also render itself, but this time it will fetch the data from the cache. There is a Refresh button, which will refer the data from the service and refreshes the cache as well as tree.

Each node displays information about some process and its current status, this node has some interactivity associated with it. On node click, some page gets loaded into the IFrame (child window) for user interactivity. User fills some information, and based on that information that process's status can be marked as completed or incomplete.

Now, my requirement is, when user enters some data into the child page (IFrame window), and if the status changes, then tree control in the parent window should be refreshed. So I need to trigger the Refresh button event, which will refresh the tree controls as well as cache.

Normally, we use jQuery to trigger the control event like:

$("#aRefresh").trigger('click');

But, there is a problem. Here, Refresh button is on parent window (HTML document), and code is running in the IFrame context. So, the above code will not work, as this is running in the IFrame context and it will not find the control in the parent window.

Now, we can change the above code to find the Control in the parent window like...

$("#aRefresh", parent.document).addClass("test-css");

The above code will work fine, and we are giving jQuery the context to find.

Quote:

Note:- Above code will run only when, both the pages I.e. parent window page as well as IFrame window page is loaded from the same domain)

As of now, we are able to find the controls, but my objective was to trigger the event. For that, the below code should run fine... atleast I thought so!!!

$("#aRefresh",parent.document).trigger('click');

But, I was wrong. it stills fails. The reason is simple.

Quote:

In HTML, Events are handled in some special way. Events cab be raised/ triggered with in the same document. Events in parent window (html document) will be invisible to child window opened in IFrame. and vice-versa. So, the code running in the IFrame context, cannot trigger the event of the controls of the parent window (web page).

Finally, I get the basics of event handing in HTML/web page and corrected my code to accomplish my goal. To do so, we first get the reference to the parent window, then we can search/find the control and then trigger the event like below:

 window.parent.$("#aRefresh").trigger('click');

This is a very basic thing, which I missed out and spent a lot time to get out of this.

Points of Interest

Events in HTML document are local to its defined document. If you have IFrames inside your web page, then IFrame script will not access the parent window control directly, and can never trigger event of the parent page controls.