Question

I have a page that looks like this:

 <div class="myclass" id="div1"><iframe id="frame1" src="myiframe.html"></div>
 <div class="myclass" id="div2"><iframe id="frame2" src="myiframe.html"></div>

In my iframe, I need to know the id of the div of its parent node, but I don’t know how.
I searched for a solution without jquery but all I found was something with getElementById stuff and I am actually searching for the id.

Can someone help me?

Answer 1

You must know that, as far as your JS code inside the iFrame is concerned, the window is the iFrame, and the document is the content of that iFrame. Here’s a little function that should work for you, in order to the parent’s document:

var parentDoc = window;
while(parentDoc !== parentDoc.parent)
{
    parentDoc = parentDoc.parent;
}
parentDoc = parentDoc.document;
var iFrames = parentDoc.getElementsByTagName('iframe');
var divs = [];
for(var i=0;i<iFrames.length;i++)
{
    divs.push(iFrames[i].parentNode);//assuming the first parent is the div
}

That should do the trick