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?
LVL 9
Sar1973Asked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Sar1973Author Commented:
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);
0
ahoffmannCommented:
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
0
Michel PlungjanIT ExpertCommented:
AHoffmann - it is a cross origin messaging

http://ajaxian.com/archives/using-html-5-postmessage
0
Determine the Perfect Price for Your IT Services

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden with our free interactive tool and use it to determine the right price for your IT services. Download your free eBook now!

ahoffmannCommented:
oops, sorry not reading proper and giving old fashioned answer :-/
0
virmaiorCommented:
This question is identical to:

http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Q_27556193.html

asked by the same poster and still open.
0
Sar1973Author Commented:
@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);  
}
0
Sar1973Author Commented:
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.
0
Sar1973Author Commented:
I've spotted like this:
PARENT PAGE (FRAME CONTAINER)
function getHeight(h) {
      if (h..origin == "http://www.domain.com")  {
            document.getElementById("myFrame").style.height = h.data + "px";  
      }
}
if (window.addEventListener) {
      window.addEventListener("message", receiveHeight,false);  
} else {
      window.attachEvent("onmessage", receiveHeight);
}

FRAME PAGE (onclick event="setTimeout('sendHeight(this.document.body.offsetHeight)',100)")
function sendHeight(h) {
var h1=this.document.body.offsetHeight;
if (h !=h1) {
      var target = parent.postMessage ? parent : (parent.document.postMessage ? parent.document : undefined);
      if (typeof target!= 'undefined') {
            target.postMessage(h1, '*');
            }  
            if (window.addEventListener) {
                  window.addEventListener("load", sendHeight, false);  
            } else {
                  window.attachEvent("load", sendHeight);
            }
      }
}
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Sar1973Author Commented:
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.
0
virmaiorCommented:
This code is not functionally different from the code I provided you with in http://www.experts-exchange.com/Web_Development/Web_Languages-Standards/Q_27556193.html.
0
Sar1973Author Commented:
Not at all: I solved it using a postMessage method, not encapsulating.
0
virmaiorCommented:
I will make a note never to participate in questions you ask again.  That way, we will both be happier.
0
Sar1973Author Commented:
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".
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.