Click here to Skip to main content
13,452,206 members (56,530 online)
Rate this:
Please Sign up or sign in to vote.
Here is the problem statement. I've two application running on two different subdomains. This is a Sharepoint site which is the hosting environment. My user control is deployed on this environment on the master page. The user control has a div element with an iframe. The src of iframe is set to the ASP.Net Web application of different subdomain discussed later. I'm using jquery-UI library to open up the div containing iFrame as a dialog popup. Let's call this sharepoint site as consumer henceforth. This is an ASP.Net Web Application on .Net platform 3.5. It serves as content inside iframe explained earlier. Let's call this provider henceforth. It contains an accordion control from jQuery-UI. On click of accordion head activate event is fired normally and I execute a javascript function to resize parent iFrame. On same domain I achieved this by calling window.parent DOM elements and then resized iFrame height from this web application. But I get Permission denied error now when consumer and provider resides on two different subdomains. I understand that this is due to the Same Origin Policy.

To fix this I just wanted to transfer the height value of web application to the host Sharepoint page. An event from from web application is fired - accordionactivate which I need to listen on the Sharepoint page javascript using window.addEventListener or window.attachEvent whichever is applicable. Since, Iframe is part of Sharepoint page and we have the new height value, so we can resize it after listening to the event raised from content window. To implement this, I used the following approaches but haven't succeeded so far.


The problem I face is that the event is not listened at the consumer end (SP site) and hence iFrame resize is not triggered. Let me know if any body have faced similar issues. I need a neat and clean cross - browser solution for this. Multiple approaches are welcome.
Posted 4-Jan-14 5:13am
Updated 5-Jan-14 4:22am

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1

First of all, very nicely explained. :)

We have some sort of work like this in one of my previous projects and I found a Cross Browser way of handling this using window.postMessage. I have also written a Tip on that.

See my Tip - Communication with Cross Domain IFrame - A Cross Browser Solution[^].

We have used this approach in our project and it worked. So, try to implement this. :)
Naman Kumar Sinha 6-Jan-14 4:15am
Hi Tadit,
Thanks a lot. Indeed I learned a lot. With some modification of my own, I got this working. Cheers.
Tadit Dash 6-Jan-14 4:37am
Glad to hear that. :)


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

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy |
Web03 | 2.8.180318.3 | Last Updated 5 Jan 2014
Copyright © CodeProject, 1999-2018
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100