javascriptonclickdom-eventsframeframeset

Call function on every click (HTML includes frames)


I have a function that should be called on EVERY click on the page.

So I tried to add an EventListener to the document:

 document.onclick = function() { /* Do Something */ }; 

but the problem is that there are many frames on my website

(I know frames are evil and not supported in HTML 5)

So I tried to add an EventListener to every frame:

window.onload = window.setInterval(  
    function() {  
        frames = getFrames();  
        for(var i=0;i<frames.length;i++) 
            frames[i].addEventListener("click", function () {
                //Do Something 
            }
    });
}, 50);

function getFrames() {
    var frameset = document.getElementsByTagName("FRAMESET")[1];
    var frame = frameset.getElementsByTagName("FRAME");
    return frame;
}

My HTML looks like this:

<frameset rows="100px,30px,*,5%">
    <frame src="topbar.php">
    <frame src="toolbar.php">
    <frameset cols="25%,40%,*%">
        <frame src="content.html>
        <frame src="content.html">
        <frame src="content.html">
    </frameset>
    <frame src="endbar.php">
</frameset>

Now working with:

window.onload = window.setInterval(
    function() {
        frames = getFrames();
        for(var i=0;i<frames.length;i++) 
            frames[i].contentDocument.onclick = 
                function() {
                    //Do Something
                    }
        };
}, 50);

Solution

  • according to me the only way to solve your problem is do somthing like this post:
    How do I handle a click anywhere in the page, even when a certain element stops the propagation?
    and import the jquery libraries, if you don't have it allready