1

Well I got the most basic question. I want to select the iframe within the div. And when this iframe is clicked no matter where, I want to remove the iframe. How can I do this?

<div id="box">
    Random thoughts
    <iframe src=""></iframe>
</div>

See here: http://jsfiddle.net/nT4uZ/1/

SarmadK
  • 123
  • 1
  • 2
  • 14
  • 2
    You can't bind to iframe events when its a different domain because of the same-origin policy. The only solution I can see is to put something over the iframe, like a transparent div. Also, show us what you've tried to accomplish your goal; SO isn't free development. – Daedalus Mar 01 '14 at 07:02
  • 1
    check this http://stackoverflow.com/questions/2381336/detect-click-into-iframe-using-javascript – Nitin Varpe Mar 01 '14 at 07:05
  • 1
    you may use a plugin for this. Check out this https://github.com/finalclap/iframeTracker-jquery – Manik Arora Mar 01 '14 at 07:27

2 Answers2

4

You cannot directly handle the click inside of an iframe as correctly @Daedalus commented.

You need top put an extra div inside the #box div which it will cover the iframe and it will handle the click above the iframe.

You need to find the dimensions of the iframe and its offset and apply those in this div.

HTML

<div id="box">Random thoughts
    <iframe src="//www.facebook.com/plugins/likebox.php?href=http%3A%2F%2Fwww.facebook.com%2FFacebookDevelopers&amp;width&amp;height=62&amp;colorscheme=light&amp;show_faces=false&amp;header=false&amp;stream=false&amp;show_border=true&amp;appId=163663917164005" scrolling="no" frameborder="0" style="border:none; overflow:hidden; height:62px;" allowTransparency="true"></iframe>
    <div id="inner_box">
    </div>
</div>

CSS

    #inner_box {
        position:absolute;
        z-index:2; 
   }
    #iframe {
        position:absolute;
        z-index:1; 
    }

JavaScript (with some help from the link here)

//Positioning the #inner_box in the same position with the iframe
var destination = jQuery('#box iframe').offset();
jQuery('#inner_box').css({top: destination.top, left: destination.left});

//Giving the #inner_box the same dimensions with the iframe
jQuery('#inner_box').width(jQuery('#box iframe').width());
jQuery('#inner_box').height(jQuery('#box iframe').height());

//Implement click handler
jQuery('#inner_box').click(function() {
    jQuery(this).closest('#box').find('iframe').remove();
});

Here is a fiddle with the code.

Community
  • 1
  • 1
Tasos K.
  • 7,979
  • 7
  • 39
  • 63
-1
$('#box iframe').click(function(){
    $('#box iframe').remove();
});

Try Online

Try to use that script, hope it can help you :)

Tasos K.
  • 7,979
  • 7
  • 39
  • 63
XatroX
  • 1
  • Basically I have tried the same thing. That is why I have posted it here because it wasn't working. – SarmadK Mar 01 '14 at 07:36