Link to home
Start Free TrialLog in
Avatar of Sar1973
Sar1973Flag for Italy

asked on

How to pass variables and/or launch functions from child pages to parent in iFrames?

I am encountering many troubles in passing the document.body.scrollHeight of an iFrame to the parent page in order to set its container size: mainly I get "denied access" errors when using "parent" or "window.parent" functions.
Could you explain me why and how to make this feature work?
Avatar of Sar1973
Sar1973
Flag of Italy image

ASKER

Does this method I have found on the web apply?

(onchildevent)
      // Send the message "Hello" to the parent window
      // ...if the domain is still "davidwalsh.name"
      parent.postMessage(this.document.body.scrollHeight,"http://www.parent.page");

Since we now have hold of the window, we can postMessage to it:
// Create IE + others compatible event handler
var eventMethod = window.addEventListener ? "addEventListener" : "attachEvent";
var eventer = window[eventMethod];
var messageEvent = eventMethod == "attachEvent" ? "onmessage" : "message";

// Listen to message from child window
eventer(messageEvent,function(e) {
  console.log('parent received message!:  ',e.data);
},false);
i.g. frames are handled like windows, hence they follow the same origin policy
if both windows (parent and your iframe) use content from the same domain i.e. some.tld, then you need to set each window's document.domain to the corresponding value
if they are from different domain, they cannot access each other, you need a proxy page then
Avatar of Michel Plungjan
AHoffmann - it is a cross origin messaging

http://ajaxian.com/archives/using-html-5-postmessage
oops, sorry not reading proper and giving old fashioned answer :-/
Avatar of Sar1973

ASKER

@mplungjan: I will test the addEventListener monday.
@Mr.Virmaior: unfortunately, I did not receive this code adapted to the question you mention. Would it be something like this? If so, where to paste formulas? Only in the frame page or also in the parent page?

(frame page body) onclick(function(this.name)) {  
  var myFRMHGT = document.getElementById(this.name).body.offsetHeight;  
  window.parent.frames['myFrame'].postMessage(myFRMHGT);        
}  
   
var onmessage = function(this.name) {  
  var data = document.getElementById(this.name).data;  
  var origin = document.getElementById(this.name).origin;  
  document.getElementById('myFrame').style.height = data;  
}
     
if (typeof window.addEventListener != 'undefined') {  
  window.addEventListener('message', onmessage, false);  
} else if (typeof window.attachEvent != 'undefined') {  
  window.attachEvent('onmessage', onmessage);  
}
Avatar of Sar1973

ASKER

One nmore question: the if(e.origin == 'http://origin-domain.com') { declaration can only be done when the page in online? I actually get an error if I type only the page name.
ASKER CERTIFIED SOLUTION
Avatar of Sar1973
Sar1973
Flag of Italy image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Avatar of Sar1973

ASKER

I've requested that this question be closed as follows:

Accepted answer: 0 points for Sar1973's comment #37766846

for the following reason:

Was an auto answer.
Avatar of Sar1973

ASKER

Not at all: I solved it using a postMessage method, not encapsulating.
I will make a note never to participate in questions you ask again.  That way, we will both be happier.
Avatar of Sar1973

ASKER

I have not deprecated your answer or said you are not reliable as expert: just appointed that did not fit to my request, which was to pass the height variable from frame to parent (while your code does not).
I do not understand then why I should enter in your "black list".