Click here to Skip to main content
14,105,677 members
Click here to Skip to main content
Add your own
alternative version

Stats

15.4K views
2 bookmarked
Posted 20 Jan 2017
Licenced CPOL

Events in JavaScript ( IFrame vs Parent Window)

, 20 Jan 2017
Rate this:
Please Sign up or sign in to vote.
In JavaScript, triggering of events is different in IFrame and 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.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

Lalit_Chandra
Software Developer (Senior)
India India
I am Lalit Chandra. I have 6 year of working experience in .Net technologies. Currently using C#, ASP.NET & ASP.NET MVC to create Information Systems, e-commerce Portals and Data driven applications. I have designed and implemented flexible solutions which support frequent UI and functionality changes.

You may also be interested in...

Comments and Discussions

 
Questioncross window iframe Pin
Member 140801136-Dec-18 5:26
memberMember 140801136-Dec-18 5:26 
Questionvery useful Pin
Member 1228610224-Jan-17 13:44
memberMember 1228610224-Jan-17 13:44 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Cookies | Terms of Use | Mobile
Web01 | 2.8.190518.1 | Last Updated 20 Jan 2017
Article Copyright 2017 by Lalit_Chandra
Everything else Copyright © CodeProject, 1999-2019
Layout: fixed | fluid