Make a div clickable when there is iframe inside

Question

I want to add onclick function to div, but when there is a facebook plugin iframe inside of the div, the onclick function not work.

there is code:

<div onclick="alert('123)">
  <iframe 
    src="https://www.facebook.com/plugins/page.php?..." 
    width="470" 
    height="160" 
    style="border:none;overflow:hidden" 
    scrolling="no" 
    frameborder="0" 
    allowTransparency="true">
  </iframe>
</div>

You are lucky I didn't flagged and downvoted. Give proper intendation to code otherwise, we are not able to see it. _there is code:_ this line made me understand there is a code. — Sagar V, Mar 24 '17 at 06:16
Hope the JS itself is not broken by unpaired quotes like in here... — Paul Stelian, Mar 24 '17 at 06:17
Possible duplicate of [capture click on div surrounding an iframe](http://stackoverflow.com/questions/3690812/capture-click-on-div-surrounding-an-iframe) — Shaunak, Mar 24 '17 at 06:20
You want to handle the click of a user who thinks they are clicking to Facebook? — Bango, Mar 24 '17 at 06:24
@Shaunak I don't think this is a dupe because, here OP wants to assign handler to div that has iFrame and not get parent div from inside iframe — Rajesh, Mar 24 '17 at 06:31
@Isabella, please do not change question based on comments. If you have proper quotes in your original code, add comment suggesting it and add caveat in question. Changing questions based on comments make its bounded scope to change and that can make suggestion/answer irrelevant. — Rajesh, Mar 24 '17 at 06:34
The question changes to: "is the missing quote a typo on the question or is that the way the code is on your page"? — blurfus, Mar 24 '17 at 06:40
@Rajesh thanks for your suggestion. this is my first time to post question on stackoverflow so i don't know how to do is right — Isabella, Mar 24 '17 at 06:56
@Isabella Thats all right. If you really do not have typo, just edit question and add caveat saying, this was a mistake while posting and my real problem is ... — Rajesh, Mar 24 '17 at 07:30

score 2 · Answer 1 · edited Jun 20 '20 at 09:12

You can try something like this:

Logic:

On parent window, search all iframes
Navigate to their parent node.
Attach event to this node.

window.addEventListener('load', registerEvent)

function registerEvent(){
  var divs = document.querySelectorAll("iframe");
  for(var i = 0; i< divs.length; i++){
    divs[i].parentNode.addEventListener("click", clickHandler)
  }
}

function clickHandler(){
  console.log(this.innerHTML);
}

div{
  background: #ddd;
  min-height: 100px;
}

iframe{
  background: #fff;
}

<div>
  <iframe 
    src="https://www.facebook.com/plugins/page.php?..." 
    width="470" 
    height="160" 
    style="border:none;overflow:hidden" 
    scrolling="no" 
    frameborder="0" 
    allowTransparency="true">
  </iframe>
</div>

score 0 · Answer 2 · answered Mar 24 '17 at 06:28

0

Your onclick event was mismatched quotes (i.e. missing the closing quote)

I also went and added some margin and padding to the div (and some borders too) to illustrate the onclick event firing when the div is clicked (as it should). Keep in mind that it is attached to the div not the iframe.

You can either use JS (or JQuery) to attach the click-handler to the iframe programmatically or, add another onclick to the iframe itself (dunno, if you can modify it)

div {
  width: 470px;
  height: 160px;
  border: 1px solid gray;
  margin: 15px;
  padding: 15px;
}

div:hover {
  cursor: pointer;
}

<div onclick="alert('123')">
  <iframe src="https://www.google.ca" 
          width="470" height="160" 
          style="border:1px solid green;overflow:hidden"
          scrolling="no" 
          frameborder="0" allowTransparency="true">
  </iframe>
</div>

answered Mar 24 '17 at 06:28

blurfus

13,485
8
55
61

Isn't missing `quote` a typographical mistake? Should we rectify it in an answer? – Rajesh Mar 24 '17 at 06:29
@Rajesh the missing quote is only part of the issue. Even if you fix that, the click handler will not work (as it's not attached to the iframe) - the answer is simply to illustrate that. I am looking for a workaround (i.e. adding the click handler programmatically) but it looks like I am running out of time – blurfus Mar 24 '17 at 06:32
1

@Rajesh OP is wondering why the `onclick` event is not firing when the `div` has an `iframe` inside. The reason is that the click is happening on the `iframe` (which, of course, has no such event bound to it - only the outer `div` does) - I tried to illustrate the clicking on the `div` does work (because what where we bound the event to) and my suggestion of adding a handler to the `iframe` programmatically as a workaround to the OP's concern – blurfus Mar 24 '17 at 06:38
The workaround would be difficult in such case as iframe does not bubble events. Even I'll try some workarounds – Rajesh Mar 24 '17 at 06:45

Make a div clickable when there is iframe inside

2 Answers2

Logic: