Click here to Skip to main content
13,588,538 members
Rate this:
 
Please Sign up or sign in to vote.
Here is the problem statement. I've two application running on two different subdomains.

http://abc.myclient.net:1234/MyApplicationSite: 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.

http://xyz.pqr.myclient.net:8080/MyApp/MyPage.aspx: 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.

document.domain
window.postMessage()
easyXDM
polling


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
v2

1 solution

Rate this: bad
 
good
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. :)
Comments
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.
   
Glad to hear that. :)

Thanks,
Tadit

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 | Cookies | Terms of Service
Web02-2016 | 2.8.180615.1 | Last Updated 5 Jan 2014
Copyright © CodeProject, 1999-2018
All Rights Reserved.
Layout: fixed | fluid

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