Solved

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

Posted on 2012-03-23
15
174 Views
Last Modified: 2013-11-23
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?
0
Comment
Question by:Sar1973
  • 7
  • 3
  • 2
  • +1
15 Comments
 
LVL 9

Author Comment

by:Sar1973
ID: 37758402
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
 
LVL 51

Expert Comment

by:ahoffmann
ID: 37760106
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
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 37760158
AHoffmann - it is a cross origin messaging

http://ajaxian.com/archives/using-html-5-postmessage
0
 
LVL 51

Expert Comment

by:ahoffmann
ID: 37760166
oops, sorry not reading proper and giving old fashioned answer :-/
0
 
LVL 20

Expert Comment

by:virmaior
ID: 37760920
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
 
LVL 9

Author Comment

by:Sar1973
ID: 37761073
@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
Do You Know the 4 Main Threat Actor Types?

Do you know the main threat actor types? Most attackers fall into one of four categories, each with their own favored tactics, techniques, and procedures.

 
LVL 9

Author Comment

by:Sar1973
ID: 37766391
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
 
LVL 9

Accepted Solution

by:
Sar1973 earned 0 total points
ID: 37766846
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
 
LVL 9

Author Comment

by:Sar1973
ID: 37769478
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
 
LVL 20

Expert Comment

by:virmaior
ID: 37769479
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
 
LVL 9

Author Comment

by:Sar1973
ID: 37786865
Not at all: I solved it using a postMessage method, not encapsulating.
0
 
LVL 20

Expert Comment

by:virmaior
ID: 37791132
I will make a note never to participate in questions you ask again.  That way, we will both be happier.
0
 
LVL 9

Author Comment

by:Sar1973
ID: 37791226
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

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

This article shows how to create and access 2-dimensional arrays in JavaScript.  It includes a tutorial in case you are just trying to "get your head wrapped around" the concept and we'll also look at some useful tips for more advanced programmers. …
When you need to keep track of a simple list of numbers or strings, the Array object is your most direct tool.  As we saw in my earlier EE Article (http://www.experts-exchange.com/A_3488.html), typical array handling might look like this: (CODE) B…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

705 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now