iframe से mousemove घटनाएं प्राप्त करें,

Question

मेरे पास एक जावास्क्रिप्ट ऐप है, जो दस्तावेज़ में एक मूसमव श्रोता जोड़ता है। समस्या: जब माउस को आईफ्रेम पर ले जाया जाता है, तो फ़ंक्शन नहीं कहा जाता है।

क्या ऐसी घटनाओं को रूट दस्तावेज़ में पारित करने का कोई तरीका है?

Answer 1

अगर आईफ़्रेम में दस्तावेज़ उसी दस्तावेज़ पर है तो आप इसे आसानी से कर सकते हैं .डोमेन।

यदि आपके पास एक ही दस्तावेज़ है .डोमेन, आपको आईफ्रेम में एक मूसमॉव श्रोता भी सेट करना होगा और मूल पृष्ठ पर मानों को पास करना होगा।

यदि दस्तावेज एक ही दस्तावेज़ पर नहीं हैं .डोमेन यह थोड़ा सा जटिल हो जाता है, और आपको जावास्क्रिप्ट को चलाने के लिए iframes पृष्ठ की आवश्यकता होगी जो mousemove ईवेंट श्रोता सेट करता है। और फिर आप यहां वर्णित क्रॉस फ्रेम संचार कर सकते हैं: http://softwareas.com/cross-domain-communication-with-iframes

अन्यथा ब्राउज़र की लागू होने वाली मूल नीति के कारण आप भाग्य से बाहर हैं।

Answer 2

फ्रेम के लिए शैलियों में pointer-events: none; रखो।

मुझे यह समस्या स्वयं थी और पाया कि यह समाधान बहुत अच्छा काम करता है और यह इतना आसान है!

Answer 3

मैं बस अब एक ही समस्या हो रही थी और मैं इस के साथ आया था:

$("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") iframe के भीतर सामग्री पकड़ लेता है और .mousemove() एक घटना श्रोता

टेस्ट एचटीएमएल जोड़ने के लिए इस्तेमाल किया जा सकता। ..

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

Answer 4

आप document.getElementById('iFrameId').contentDocument साथ बाध्यकारी माता पिता document घटना के संयोजन के माध्यम से देखना चाहिए घटना, चुड़ैल आपको 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')); 

Answer 5

हालांकि सूचक-घटनाओं: कोई नहीं; फ्रेम के लिए शैलियों में इस समस्या को हल कर सकते हैं, लेकिन यह iframe में किसी भी अन्य घटनाओं अक्षम, मेरे समाधान की तरह मूल्य टॉगल करने के लिए है:

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