CODEWITHSUNDEEP
javascriptjqueryiframeaddeventlistener
bushpop
bushpop

Reputation: 33

counting clicks on iframe

jQuery(document).ready(function (e) {
    focus();
    var listener = addEventListener('blur', function() {
        if(document.activeElement === document.getElementById('my_iFrame')) {
            console.log("clicked!");
        }
        removeEventListener(listener);
    });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<iframe src="http://example.com" id="my_iFrame"></iframe>

This code count only one click. How to do counting more clicks?

Thanks!

Upvotes: 2

Views: 1052

Answers (1)

Emil Borconi
Emil Borconi

Reputation: 3467

@benjarwar is right in both of his comments, however I consider the following solution more elegant than the one suggested in the other post, but being a post which is not active for over 1 year I will post the solution here.

This will work cross domain as well as long as you have access to both the iframe and the parent frame code.

Assumption made that you will use jQuery in both parent and iframe as well!

In the iframe you add:

$("html").on("click",function(){
parent.postMessage("click", "*");
});

In the parent you add:

window.addEventListener("message", function(event) { 
 if (event.data=="click") 
 //above if only added to be sure you are not getting some other messages post to you parent page.
   { console.log("clicked!"); }
});

Upvotes: 1

Related Questions