jQuery DOM in iframe

Inside an iframe I need to execute a script which will get a value from the div that wraps around the iframe.

<div style=“border-color:red”>
<iframe src=“” class=“the-iframe”>
//script executed in the iframe
</iframe>
</div>

Both scripts are on the same domain, although may be different protocols (http/https sometimes).

Also, the iFrame where the script is used will always be the last one in the DOM (if more than one exist).

Neither of these work:

$(‘iframe’).before.css(‘border-color’);
$(‘.the-iframe’).before.css(‘border-color’);
$(‘iframe’, window.parent.document).last.before.css(‘border-color’);

Is it possible, and if so what do I do?

Hi John,

The protocol, domain and even port of the page containing the iframe need to match the iframe’s protocol, domain and port.
You won’t get it to work otherwise.

To access the border-color of the DIV-element (which is the parent of the iframe, not a sibling) in the parent page from within the iframe, you could use:

$(".the-iframe", parent.document.body).parent().css('border-color');

Hope it helps :wink: