Apply onClick to Iframe

Question

Gibt es eine Möglichkeit, einen Iframe mit einem anderen Element zu "kapseln", um onClick zu simulieren? Ich weiß, dass Iframe keine Ereignisse unterstützt, aber ich muss Klicks von meiner Website verfolgen, die durch den Iframe verlassen werden.

Danke!

Answer 1

Wenn die Frame-Seite aus der gleichen Domäne enthält (nicht same-origin policy verletzt), können Sie direkt mit dem Dokument interagieren:

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

Wenn es sind kein Glück externe Seite enthält, die Sie dann - keine Möglichkeit, aus offensichtlichen Sicherheitsgründen zu tun, was Sie wollen. Obwohl alle Inhalte visuell Teile derselben Seite sind, müssen Frames, die aus verschiedenen Domänen stammen, in Bezug auf das Scripting getrennt bleiben. Ansonsten könnte jede Seite z.B. Erstellen Sie einen versteckten Iframe, laden Sie Ihr Webmail und stehlen Sie Ihr Session-Cookie daraus. Alle Daten sind für den Benutzer zugänglich, sollten aber für den Seitenautor nicht zugänglich sein.

Answer 2

Das obige Skript eignet sich hervorragend zum Testen der Klickfunktion im Iframe. wenn Sie Google neueren analytics.js Tracking-Code mit Ereignisse verwenden Tracking Klicks in der iframe zu verfolgen, genauer gesagt, der obige Code würde wie folgt aussehen:

<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> 

und die iframe wie dies die ID aussehen (beachten =“ myframe“wird in der JavaScript verwiesen):

<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> 

Dann das Ereignis klicken um zu testen, wenn Sie mit Google-Event-Tracking, in der Google Analytics-Dashboard unter Standardberichte> Real-Time> Veranstaltungen ein Klick zeigen würde kennen Als Ereignisaktion: Klicken Sie auf, Ereignisbezeichnung: Mein Rahmen wurde angeklickt. Oder langfristig im Dashboard unter Verhalten> Ereignisse.

Ich habe dies getestet und wie das vorherige Poster angegeben, wird dies nur funktionieren, wenn die Iframe-Quelle auf der gleichen Domain ist. mit

Answer 3

Versuchen: https://github.com/vincepare/iframeTracker-jquery

Da es unmöglich ist, iframe Inhalt (DOM) von der Elternseite aufgrund der Same Origin Policy zu lesen, Tracking auf dem Blur-Ereignisse auf einer Seite/iframe Grenzüberwachungssystem telling zugeordnet basiert über welchen iframe ist der Mauszeiger jederzeit.

Spiel die iframe-Elemente Sie mit einem jQuery-Selektor verfolgen möchten und rufen iframeTracker mit einer Callback-Funktion, die aufgerufen wird, wenn ein Klick auf die iframe erkannt wird:

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

Und viele weitere Optionen.