Применить onClick to Iframe

Question

Есть ли способ «инкапсулировать» iframe каким-либо другим элементом для имитации onClick? Я знаю, что Iframe не поддерживает события, но мне нужно отслеживать клики с моего сайта, которые уходят через iframe.

Спасибо!

Answer 1

Если кадр содержит страницы с того же домена (не нарушала same-origin policy), вы можете напрямую взаимодействовать с документом:

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

Если она содержит внешнюю страницу, то вы не повезло - никак делать то, что вы хотите по очевидным причинам безопасности. Хотя все содержимое визуально является частью одной и той же страницы, фреймы, идущие из разных доменов, должны оставаться отдельными с точки зрения сценариев. В противном случае любая страница могла бы, например, создайте скрытый iframe, загрузив свою веб-почту и украсть из нее свой cookie сеанса. Все данные доступны пользователю, но он не должен быть доступен для автора страницы.

Answer 2

Вышеупомянутый скрипт отлично подойдет для тестирования функции click в iframe. Более конкретно, если вы используете более новый код analytics.js отслеживания Google с событием отслеживанием для отслеживания кликов в IFRAME, приведенный выше код будет выглядеть следующим образом:

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

и IFrame может выглядеть следующим образом (обратите внимание, идентификатор =» myframe»ссылается на 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> 

Затем, чтобы проверить событие щелчка, если вы знакомы с отслеживания событий Google, в Google Analytics Dashboard в разделе Стандартные отчеты> Real-Time> События щелчок будет показывать как событие Действие: нажмите, метка события: мой кадр был нажат. Или долгое время на панели инструментов в разделе «Поведение»> «События».

Я протестировал это, и, как показал предыдущий плакат, это будет работать, только если источник iframe находится в одном домене.

Answer 3

Попробуйте использовать: https://github.com/vincepare/iframeTracker-jquery

Так как это невозможно читать содержимое Iframe (DOM) из родительской страницы из-за ту же политику происхождения, отслеживание на основе события размытия, связанное с системой контроля граничной рассказывая страницу/IFRAME над которым iframe является курсором мыши в любое время.

Матч Iframe элементы, которые вы хотите отслеживать с помощью селектора JQuery и вызвать iframeTracker с функцией обратного вызова, которая будет вызываться, когда клик на IFRAME обнаружен:

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

И еще много вариантов.