बाहरी पृष्ठ को स्क्रॉल करने के लिए iFrame क्रियाओं को रोकने के लिए कैसे करें

Question

सबसे पहले, मुझे पता है कि इस घटना के बारे में कई प्रश्न हैं लेकिन अब तक की कोई भी कार्यवाही मेरे यहां मौजूद स्थिति में मदद नहीं करेगी।

पर्यावरण: मेरे कोड एक पृष्ठ मैं नियंत्रण नहीं अंदर बाहरी iFrame में है। यह मेरी सभी सामग्री को फिट करने के लिए आकार में है इसलिए मेरे आईफ्रेम के अंदर कोई स्क्रोलिंग नहीं होती है। इसके बजाय, बाहरी पृष्ठ इसकी सामग्री को देखने के लिए इसे ऊपर और नीचे स्क्रॉल कर सकता है।

समस्या: मेरे पास एक आंतरिक आईफ्रेम है जिसमें तीसरे पक्ष के विज्ञापन हैं जिन्हें मैं नियंत्रित नहीं कर सकता। भीतरी iFrame निम्नलिखित जावास्क्रिप्ट के किसी भी चलाता है, तो बाहरी पृष्ठ स्क्रॉल नीचे सब कुछ दृश्य में आंतरिक iFrame लाने के लिए कमांड:

1. कलंक और अंदर यह

2. window.location.href या एक तत्व पर ध्यान केंद्रित document.location.hash इसके अंदर एक एंकर पर।

3. scrollIntoView एक तत्व के अंदर यह

Here is a demo a colleague put together (5 सेकंड प्रतीक्षा इसे शुरू करने के लिए)

समाधान पर जो काम नहीं करते:

1. अगर मैं नियंत्रित बाहरी पृष्ठ, मैं ऑनस्कोल ईवेंट को सुन सकता हूं और पेज को स्क्रॉलिंग से रोक सकता हूं अगर यह किसी मूसहेल या कुंजी अप/डाउन इवेंट से नहीं था। हालांकि, सुरक्षा कारणों से, मेरा बाहरी आईफ्रेम मुख्य पृष्ठ तक नहीं पहुंच सकता है या मुख्य पृष्ठ को ऊपर या नीचे स्क्रॉल करने से रोक सकता है।
2. मैं उपरोक्त वर्णित सभी जावास्क्रिप्ट विधियों को ओवरराइट कर सकता हूं, इसलिए उन्होंने काम नहीं किया - हालांकि, मेरे आंतरिक आईफ्रेम में विज्ञापन वास्तव में अपने आंतरिक आईफ्रेम बनाते हैं जिनके पास कार्यक्षमता है और एक ही समस्या का कारण बनता है।
3. प्रचारित होने की कोई घटना नहीं है कि मैं देख सकता हूं कि मेरा आईफ्रेम मुख्य पृष्ठ तक पहुंचने से क्यों रोक सकता है। ब्राउज़र सीधे innfost iFrame सुनने के लिए प्रतीत होता है।

Answer 1

हो सकता है कि वहाँ इस समस्या को हल करने के लिए कुछ अन्य तरीके हैं, लेकिन एक बिल्कुल स्पष्ट समाधान उन्हें fixed के रूप में स्थिति द्वारा साइट के प्राकृतिक लेआउट से बाहर परेशानी iframes लेने के लिए है।

तब एकमात्र शेष चुनौती बल हो सकती है जैसे कि वे प्राकृतिक लेआउट का हिस्सा थे। लेकिन मूल कार्य की तुलना में यह कार्य औसत जटिलता का प्रतीत होता है।

इसके अलावा, आपके विशेष मामले में, उपरोक्त दृष्टिकोण बॉक्स से काफी काम करता है। चूंकि बाहरी आइफ्रेम स्क्रॉल करने योग्य नहीं है और इसकी ऊंचाई इसकी सामग्री ऊंचाई से मेल खाती है: आपको बस डालने की आवश्यकता है - प्रत्येक आईफ्रेम के लिए - एक प्लेसहोल्डर जो इसके समकक्ष आकार से मेल खाता है ...

Answer 2

यदि आप IE10 और नीचे समर्थन छोड़ सकते हैं और iframes समान डोमेन हैं, आप समाधान समाधान 2 (विधियों को फिर से लिखना) और mutation ईवेंट के संयोजन का उपयोग कर सकते हैं। आपको पहले से ही DOM में सभी iFrames के माध्यम से पुन: प्रयास करना होगा और अवांछित कार्यों को हटा देना होगा, और शायद अवांछित अंतराल को भी साफ़ करना होगा। और प्रत्येक document पर आप mutationobserver जोड़ते हैं जो पर समान स्क्रिप्ट चलाएंगे यदि वे iFrames हैं। तो आपके पास शुरुआत में सभी iframes के माध्यम से एक पुनरावर्ती कार्य होगा, और विधियों को हटाने, अंतराल को साफ़ करने और प्रत्येक iFrame पर पर्यवेक्षकों को जोड़ने के लिए एक फ़ंक्शन होगा। और एक बार एक iFrame जोड़ा जाता है, तो आप इस तरह it.Something पर एक ही बात चलाएँ:

पुनरावर्ती क्रिया:

var to_cancel = ["scrollIntoView","blur","focus"]; 
window.onload = function(){iterate_window_object(window)}; 
function iterate_window_object(cur_win){ 
    remove_methods(cur_win); 
    for(var i=0;i<cur_win.frames.length;i++){ 
     remove_methods(cur_win.frames[i]) 
     if(cur_win.frames[i].length>0){ 
       iterate_window_object(cur_win.frames[i]) 
      } 

     } 
    } 

सफाई समारोह:

function remove_methods(cur_win){ 
     for(var j=0;j<to_cancel.length;j++){ 
      cur_win.Element.prototype[to_cancel[j]] = {} 
     } 

     for (var k = 0; k < 999;k++){ 
      cur_win.clearInterval(k); 
     } 
     cur_win.setInterval = {}; 
     cur_win.observer = new MutationObserver(function(mutations) { 
      mutations.forEach(function(mutation) { 
        for(var k=0;k<mutation.addedNodes.length;k++){ 
         var added_node = mutation.addedNodes[k] 
         if(added_node.tagName == "IFRAME"){ 
          remove_methods(added_node.contentWindow); 
          added_node.contentWindow.onload = function(){iterate_window_object(added_node.contentWindow)}; 
         } 
        }; 
       });  
      }); 
      cur_win.config = { childList: true }; 
       cur_win.observer.observe(cur_win.document.getElementsByTagName('body')[0], cur_win.config); 

     } 

संभवतः के लिए एक रास्ता है इसे बेहतर दिखाना, सबसे कठिन हिस्सा कॉल करने से पहले विधियों को संशोधित करने में सक्षम है। और यहां यह थोड़ा अधिक है क्योंकि यह नए iFrames के माध्यम से फिर से शुरू होता है ताकि यदि पहले से जोड़ा गया iFrames के साथ एक आईफ्रेम जोड़ा गया है, तो उन्हें कार भी ले जाया जाता है। यह शायद जरूरी नहीं है। तो यह शायद एक समाधान हो सकता है, लेकिन mutation घटनाओं IE10 और नीचे समर्थित नहीं हैं।