Adding click event handler to iframe

Question

I want to handle click event on an iframe with a handler that gets the iframe’s id as parameter.

I’m able to add an onClick event handler via JavaScript as follows and it works fine:

iframe.document.addEventListener('click', clic, false);

But in this case I’m unable to pass a parameter to clic(). I tried to print this.id in clic() but no result.

onClick HTML attribute does not work at all, the handler is not called.

<html>
<head>
<script type="text/javascript">
function def() {
    myFrame.document.designMode = 'on';
}
function clic(id) {
    alert(id);
}
</script>
</head>
<body onLoad="def()">
<iframe id="myFrame" border="0" onClick="clic(this.id)"></iframe>
</body></html>

as commented by deepi in an answer: your code (what you gave on top) is working fine. But it's working when you click exactly on the border not in side box — Félix Adriyel Gagnon-Grenier
– Félix Adriyel Gagnon-Grenier, Commented May 20, 2015 at 1:22

Gaurav Agrawal · Accepted Answer · 2011-06-23 10:29:53Z

31

iframe doesn't have onclick event but we can implement this by using iframe's onload event and javascript like this...

function iframeclick() {
document.getElementById("theiframe").contentWindow.document.body.onclick = function() {
        document.getElementById("theiframe").contentWindow.location.reload();
    }
}


<iframe id="theiframe" src="youriframe.html" style="width: 100px; height: 100px;" onload="iframeclick()"></iframe>

I hope it will helpful to you....

answered Jun 23, 2011 at 10:29

Gaurav Agrawal

4,44110 gold badges47 silver badges64 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Alessio Over a year ago

it works only if the current website has the same protocol of the iframe (not working if one is http and the other one is https)

Ε Г И І И О Over a year ago

Defeats the purpose of using an iframe if this doesn't work across domains.

Manohar Reddy Poreddy Over a year ago

See 2 solutions here - stackoverflow.com/a/73669523/984471

Wladimir Palant · Accepted Answer · 2011-06-23 11:17:49Z

19

You can use closures to pass parameters:

iframe.document.addEventListener('click', function(event) {clic(this.id);}, false);

However, I recommend that you use a better approach to access your frame (I can only assume that you are using the DOM0 way of accessing frame windows by their name - something that is only kept around for backwards compatibility):

document.getElementById("myFrame").contentDocument.addEventListener(...);

edited Jun 23, 2011 at 11:17

answered Jun 23, 2011 at 10:32

Wladimir Palant

57.8k12 gold badges100 silver badges129 bronze badges

6 Comments

samach Over a year ago

thanks wladimir....u solved half of my prblm...but still this.id is nt working. if i pass "hello world" then it gets printed but for this.id it says "undefinied" in the alert box:S

Wladimir Palant Over a year ago

Right, that's because you added the listener to the document - and the document doesn't have an ID. You probably want to add it to the <iframe> element instead, like in your first example: document.getElementById("myFrame").addEventListener(...);

Flash Thunder Over a year ago

Can you assign that event even when iframe is from different scope?

Wladimir Palant Over a year ago

@FlashThunder: No, you generally cannot intercept clicks on frames from a different security context (if you could that would be a security issue).

A. Savva Over a year ago

there is no .contentDocument method for me. What am I missing?

|

Collectives™ on Stack Overflow

Adding click event handler to iframe

2 Answers 2

3 Comments

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related