Join the social network of Tech Nerds, increase skill rank, get work, manage projects...
 
  • How to detect if user click inside and outside of an Iframe

    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 0
    • 5.41k
    Comment on it

    Hello Reader's! If you are developing the contents with Iframe window and you want make it show the click inside and outside the iframe, Then you can use the code below:-

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
    <html>
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
    <title>Detect IFrame Clicks</title>
    <script type="text/javascript">
        $(document).ready(function() {
            var isOverIFrame = false;
    
            function processMouseOut() {
                log("IFrame mouse >> OUT << detected.");
                isOverIFrame = false;
                top.focus();
            }
    
            function processMouseOver() {
                log("IFrame mouse >> OVER << detected.");
                isOverIFrame = true;
            }
    
            function processIFrameClick() {
                if(isOverIFrame) {
                    // replace with your function
                    log("IFrame >> CLICK << detected. ");
                }
            }
    
            function log(message) {
                var console = document.getElementById("console");
                var text = console.value;
                text = text + message + "\n";
                console.value = text;
            }
    
            function attachOnloadEvent(func, obj) {
                if(typeof window.addEventListener != 'undefined') {
                    window.addEventListener('load', func, false);
                } else if (typeof document.addEventListener != 'undefined') {
                    document.addEventListener('load', func, false);
                } else if (typeof window.attachEvent != 'undefined') {
                    window.attachEvent('onload', func);
                } else {
                    if (typeof window.onload == 'function') {
                        var oldonload = onload;
                        window.onload = function() {
                            oldonload();
                            func();
                        };
                    } else {
                        window.onload = func;
                    }
                }
            }
    
            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);
                }
            }
    
            attachOnloadEvent(init);
        });
    </script>
    
    </head>
    <body>
    <iframe src="www.findnerd.com" width="100%" height="1300px"></iframe>
    <br></br>
    <br></br>
    <form name="form" id="form" action=""><textarea name="console"
    id="console" style="width: 100%; height: 300px;" cols="" rows=""></textarea>
    <button name="clear" id="clear" type="reset">Clear</button>
    </form>
    </body>
    </html>
    

    Now when every time user move cursor over it, It will reflect the activity.

 0 Comment(s)

Sign In
                           OR                           
                           OR                           
Register

Sign up using

                           OR                           
Forgot Password
Fill out the form below and instructions to reset your password will be emailed to you:
Reset Password
Fill out the form below and reset your password: