Apply onClick to Iframe

问题:

Is there any way to "encapsulate" an Iframe with some other element to simulate onClick? I know the Iframe doesn't support events but I need to track clicks from my website that are leaving thru the Iframe.

Thanks!

回答1:

If the frame contains page from the same domain (does not violate same-origin policy), you can interact directly with its document:

<script type="text/javascript">
window.onload = function() {
    var oFrame = document.getElementById("myframe");
    oFrame.contentWindow.document.onclick = function() {
        alert("frame contents clicked");
    };
};
</script>

If it contains external page then you're out of luck - no way to do what you want for obvious security reasons. Although all the contents is visually parts of the same page, frames coming from different domains must stay separate in terms of scripting. Otherwise any page could e.g. create a hidden iframe loading your webmail and steal your session cookie from it. All the data is accessible to the user, but it should not be accessible to the page author.

回答2:

Try using: https://github.com/vincepare/iframeTracker-jquery

Since it's impossible to read iframe content (DOM) from the parent page due to the same origin policy, tracking is based on the blur event associated to a page/iframe boundary monitoring system telling over which iframe is the mouse cursor at any time.

Match the iframe elements you want to track with a jQuery selector and call iframeTracker with a callback function that will be called when a click on the iframe is detected :

jQuery(document).ready(function($){
    $('.iframe_wrap iframe').iframeTracker({
        blurCallback: function(){
            // Do something when the iframe is clicked (like firing an XHR request)
        }
    });
});

And many more options.

回答3:

The above script will work great for testing the click function in the iframe. More specifically, if you are using Google's newer analytics.js tracking code with event tracking to track clicks in the iframe, the above code would look like this:

<script type="text/javascript">
window.onload = function() {
    var oFrame = document.getElementById("myframe");
    oFrame.contentWindow.document.onclick = function() {
        ga('send', 'event', 'link', 'click', 'My Frame Was Clicked');
    };
};
</script>

and the iframe may look like this (note the id="myframe" is referenced in the javascript):

<iframe id="myframe" src="http://www.yourowndomain.com" scrolling="yes" marginwidth="0" marginheight="0" vspace="0" hspace="0" height="800" style="border:0; overflow:hidden; width:100%;"></iframe>

Then to test the event click, if you are familiar with Google's event tracking, in the Google Analytics Dashboard under Standard Reports > Real-Time > Events a click would show up as Event Action: click, Event Label: My Frame Was Clicked. Or long term in the Dashboard under Behavior > Events.

I've tested this and as the previous poster indicated this will only work when the iframe source is on the same domain.