Pertanyaan Terima acara mousemove dari iframe juga


Saya memiliki aplikasi javascript, yang menambahkan pendengar mousemove ke dokumen. Masalah: Ketika mouse digerakkan ke atas iframe, fungsi ini TIDAK disebut.

Apakah ada cara untuk melewati peristiwa semacam itu ke dokumen root?


9
2018-03-10 14:45


asal


Jawaban:


Anda dapat melakukannya dengan mudah jika dokumen dalam iframe ada di document.domain yang sama.

Jika Anda memiliki document.domain yang sama, Anda harus mengatur pendengar mousemove di iframe juga dan meneruskan nilai ke halaman induk.

Jika dokumen tidak pada document.domain yang sama itu menjadi sedikit rumit, dan Anda akan memerlukan halaman iframes untuk menjalankan javascript itu sendiri yang mengatur pendengar acara mousemove. lalu Anda dapat melakukan komunikasi bingkai silang seperti yang dijelaskan di sini: http://softwareas.com/cross-domain-communication-with-iframes

Jika tidak, Anda kurang beruntung karena kebijakan asal yang sama yang ditegakkan browser.


4
2018-03-10 14:47



Taruh pointer-events: none; dalam gaya untuk frame.

Saya mengalami masalah ini sendiri dan menemukan solusi ini bekerja dengan baik dan sangat sederhana!


31
2018-04-19 20:14



Saya mengalami masalah yang sama sekarang dan saya datang dengan ini:

$("iframe").contents().find("body").mousemove(function(cursor){
        $("#console").html(cursor.pageX+":"+cursor.pageY);
    });
    $(document).mousemove(function(cursor){
        $("#console").html(cursor.pageX+":"+cursor.pageY);
    });

.contents().find("body") mengambil isi di dalam iframe dan .mousemove() dapat digunakan untuk menambahkan pendengar acara

Uji html ...

<div id="console"></div>

2
2018-04-08 09:18



Anda harus melihat melalui kombinasi induk document acara mengikat dengan document.getElementById('iFrameId').contentDocument acara, penyihir memungkinkan Anda untuk mendapatkan akses ke elemen konten iFrame.

https://stackoverflow.com/a/38442439/2768917

function bindIFrameMousemove(iframe){
    iframe.contentWindow.addEventListener('mousemove', function(event) {
        var clRect = iframe.getBoundingClientRect();
        var evt = new CustomEvent('mousemove', {bubbles: true, cancelable: false});

        evt.clientX = event.clientX + clRect.left;
        evt.clientY = event.clientY + clRect.top;

        iframe.dispatchEvent(evt);
    });
};

bindIFrameMousemove(document.getElementById('iFrameId'));

1
2018-03-28 09:33



Meskipun pointer-peristiwa: tidak ada; dalam gaya untuk frame dapat memecahkan masalah ini, tetapi menonaktifkan acara lain di iframe, solusi saya adalah untuk beralih nilai seperti:

{{pointer-events : isMoving? 'none' : 'all' }}

1
2018-02-07 08:08