Hiding a div that contains an iframe

Question

I have a div that contains the iframe, this iframe loads a URL which shows a page.

Within the iframe, i have a close button which when clicked, hides the div. But I am unable to access the div from within the iframe.

My code as below

<div class="app" id="modalOverlay" style="background-color:rgba(0,0,0,0.5);position:absolute;z-index:1;width:100%;height:100%;top: 0;left: 0;">
  <div id="modalContainer" style="position:absolute;z-index:2;margin: -250px 0 0 -250px;top: 50%;left: 50%;background-color: #222;width: 500px;height: 500px;">
    <a class="close" style="position:relative;top:-10px;z-index:3">Close</a>
    <iframe src="http://www.local.dev/api/v1/track" frameborder="0" style="width:500px;height:500px;position:relative;top:-20px">
    </iframe>
  </div>
</div>

Within the iframe src view, i load a js which uses jquery

$(document).on('click','.close',function(){
    $(document).closest('.app').remove();
});

Anyway to do this?

whether the iframe source is from the same domain or a different one — Arun P Johny, Feb 21 '14 at 10:12
if both pages are on same domain any js code will work otherwise you cannot do that. — siniradam, Feb 21 '14 at 10:17

DhruvJoshi · Answer 1 · 2014-02-21T10:24:28.683

Try something like this:

$('#divtohide', window.parent.document).hide();

Or something like this:

$("#InFrameId").on('click', function() {
    $('#divtohide', window.parent.document).hide();
});

EDIT: based on the recent update to your question if the frame is from a different domain, browser will flag this as XSS and you may not be able to do much. One way you can run scripts is if the server of the iframe is configured to send the X-XSS-Protection header with correct value.

score 0 · Answer 2 · answered Feb 21 '14 at 10:13

0

you can use:

$('#modalContainer', window.parent.document);

second parameter is the context in which to search.

$(document).on('click','.close',function(){
  $('.app', window.parent.document).remove();
});

answered Feb 21 '14 at 10:13

Milind Anantwar

81,290
25
94
125

score 0 · Answer 3 · answered Feb 21 '14 at 18:43

This can be done with child to parent frame messaging.

Have the parent frame listen for a message.

<div id="myDiv">
    <iframe src="childFrame.html" id="frame1"></iframe>
</div>

<script>    
window.onmessage = function(e) {
     if(e.data == "close") $("#myDiv").toggle();
}
</script>

The child frame can send a message to the parent frame.

<button onclick="parent.postMessage('close', '*');">Hide</button>

See my gist: https://gist.github.com/sfarthin/9140403

DhruvJoshi's method will have the browser flag this as a XSS attack.

score -1 · Answer 4 · edited May 23 '17 at 11:57

-1

Simply you can't, according to your code, I think your iframe comes from different domain, so a frame from different domain cant access to parent page.

Therefore you may consider using nodejs or maybe, you should read this: Cross domain iframe issue or a search with "crossdomain iframe" keywords will lead you to what you need.

edited May 23 '17 at 11:57

Community

1
1

answered Feb 21 '14 at 10:21

siniradam

2,727
26
37

Hiding a div that contains an iframe

4 Answers4