1 September 2015

Getting clicked event inside the ifarme using javascript

Hi All,

Today I was trying to get the click event from the iframe using javascript. I am not good at javascript, so it took me some time to get this to be done. So I have decided to publish it on my blog so that it will be help for at least those guys who are not good at javascript like me :)

I have written the following code to get the click event from iframe in javascript.
 

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
</head>
<body>
<script>
var isOverIFrame = false;
function processMouseOut() {
    isOverIFrame = false;
   
}
function processMouseOver() { isOverIFrame = true; }
function processIFrameClick() {
    if(isOverIFrame) {
alert('Mouse is clicked');
      top.focus();
    }
}

function init() {
    var element = document.getElementsByTagName("iframe");
    for (var i=0; i<element.length; i++) {
        element[i].onmouseover = processMouseOver;
        element[i].onmouseout = processMouseOut;
    }
    if (typeof window.attachEvent != 'undefined') {
        top.attachEvent('onblur', processIFrameClick);
    }
    else if (typeof window.addEventListener != 'undefined') {
        top.addEventListener('blur', processIFrameClick, false);
    }
}
</script>
<iframe src="test.html">
</iframe>
<script>init();</script>
</body>
</html>


So once you run the page and click inside the iframe it will give you a alert as shown below:















Happy Coding :)

0 on: "Getting clicked event inside the ifarme using javascript"