Access container of parent iframe element (Iframe inside iframe)

Question

I have next structure of elements:

<div class="container">
  <iframe class="outer">
    ..
      <iframe class="inner">
        actual markup with scripts here
      </iframe>
  </iframe>
</div>

using pure javascript, i've meneged to get out of "inner" iframe into outer one:

//this is HTML tag of ".outer" iframe
var parent = window.parent.document.getElementsByTagName('html')[0];

but still i need to get to ".container" element in order to manipulate it. Can anyone tell me how to get ".container" element from script inside ".inner" element??

Answer 1

Maybe this:

var outer = window.parent;

var mainWindow = outer.parent;

var container = mainWindow.document.getElementsByClassName('container')[0];

but dont forget that your iframes have to be on the same domain.

Answer 2

I would try

var containerElement = window.frames.top.top.document.getElementsByClassName('container')[0];

But be careful: If you try to break out of your frame and want to access a document with a different domain, ports or protocol, your browser (hopefully) will return an exception like this:

Uncaught SecurityError: Blocked a frame with origin "null" from accessing a frame with origin "null". Protocols, domains, and ports must match.