Якщо URL адреса iframe має домен як і основна сторінка тоді відстежити подію переміщеня курсора можна наступним чином:
<iframe id="iframe_test" src="http://яваскрипт.укр/"></iframe>
var frame=document.getElementById('iframe_test');
frame.contentWindow.onmousemove=function(){ alert('onmousemove'); };
frame.contentWindow.ontouchmove=function(){ alert('ontouchmove'); };
frame.contentWindow.onclick=function(){ alert('onclick'); };
Якщо ж iframe містить URL адресу іншого домену тоді за політикою безпеки браузера відстежити події НЕ можливо.
Розглянемо які є можливості часткового обходу політики безпеки браузера.
onblur
Вказуємо подію onblur. Коли головне вікно втратить фокус у події onblur перевіряємо чи фрейм є активний.
Також спачатку передається фокус вікну за допомогою метода focus().
focus(); //передаємо фокус головному вікну
var iframe=document.getElementById('test4');
var w=window;
window.addEventListener('blur', function(){
if(document.activeElement ===iframe){
alert('click on iframe');
}
});
pointer-events
CSS властивість pointer-events вказує чи реагує елемент на курсор. Якщо вказати значення "none" тоді усі події будуть відбуватися на батьківській сторінці а не у фреймі.
При цьому фрейм не буде реагувати на події миші. Тобто відкритя силок (кліки), прокрутка у фреймі буде неможлива.
Даний спосіб підходить коли фрейм необхідно лише показати до події миші.
Зверніть увагу що старі браузери не підтримують CSS властивість pointer-events.
<ifram id="iframe_test2" src="https://example.com/" width="100%" height="500px"></iframe>
var frame=document.getElementById('iframe_test2');
frame.style.pointerEvents='none';
document.onclick=function(){
alert('onclick');
}
Змінний pointer-events
Змінюючи властивість стилю pointer-events на короткий час можна відстежувати події в цей проміжуток часу. Прицьому фрейм буде "підзависати" на події.
mouseFrame=function(a){
var iframe=document.querySelector(a);
if(iframe===null)return;
if( iframe.style.pointerEvents=='none' ){
iframe.style.pointerEvents='auto';
setTimeout(mouseFrame, 1500, a);
}else{
iframe.style.pointerEvents='none';
setTimeout(mouseFrame, 700, a);
}
}
window.onmousemove=function(){console.log('mousemove');}
window.ontouchmove=function(){ console.log('touchmove'); };
mouseFrame('#iframe_test3');
Прозорий div
Розмістити прозорий div елемент дозволяє відстежувати переміщення миші, клік. Прицьому якщо div показувати і скривати через певні проміжки часу то це дозволить мати "робочий" фрейм який можна прокручувати і навіть відкривати силки.
Недоліками є те що відстежити події можливо лише у момент відображення елемента div поверх фрейму. Прицьому якщо в цей момент користувач клікне на посилання тоді дана дія не відбудеться, так як клік буде по прозорому елементу div.
window.showDiv=function(id_iframe){
var div=document.getElementById('div_iframe');
var iframe=document.querySelector(id_iframe);
if(div===null){
div=document.createElement('div');
div.id='div_iframe';
var rec=iframe.getBoundingClientRect();
div.style.position="absolute";
div.style.top=iframe.offsetTop+'px';
div.style.left=iframe.offsetLeft+'px';
div.style.width=iframe.offsetWidth+'px';
div.style.height=iframe.offsetHeight+'px';
//колір red вказаний для наглядного прикладу позиції div. Робочий колір: white
div.style.backgroundColor='red';//'#ffffff';
div.style.opacity=0.1;
div.style.zIndex='9999';
//задаєм події
div.addEventListener('click', function(){alert('click');}); //event click
div.addEventListener('mousemove',function(){console.log('move');}); //event move muose
document.body.appendChild(div);
setTimeout(showDiv, 750, id_iframe);
}else{
div.parentElement.removeChild(div);
setTimeout(showDiv, 2000, id_iframe);
}
}
showDiv('#iframe_test4');