मैं एक Ionic 3 एप्लिकेशन पर काम कर रहा हूं। एक div के अंदर, मैं एक बाहरी url को एक iframe में लोड कर रहा हूं और यह पूरी तरह से लोड हो रहा है। लेकिन जब ध्यान केंद्रित किया जाता है तो यह समस्या पैदा करता है। आईफ्रेम हर बार फोकस करने पर पुनः लोड होता है।

परिदृश्य-01: उस पृष्ठ में जहां मैंने आईफ्रेम लोड किया है, आईफ्रेम के बाहर अन्य नियंत्रण हैं जैसे कुछ डेटा दर्ज करने के लिए टेक्स्ट बॉक्स। इसलिए, जब मैं टेक्स्टबॉक्स पर क्लिक करता हूं, तो कीबोर्ड दिखाई देता है लेकिन साथ ही साथ आईफ्रेम फिर से लोड हो जाता है।

परिदृश्य-02: मेरे पास एप्लिकेशन में बाईं ओर से एक मेनू स्लाइडिंग ड्रॉअर है। जब मैं किसी अन्य पृष्ठ का चयन करने के लिए स्लाइडिंग ड्रॉअर खोलता हूं, तो मैं मौजूदा पृष्ठ के आईफ्रेम को फिर से लोड करता हुआ देख सकता हूं।

परिदृश्य-03: बाहरी url जिसे मैंने iframe में लोड किया है, उसमें कुछ इनपुट नियंत्रण हैं। तो, मैं उन इनपुट बॉक्स में कुछ दर्ज करना चाहता हूं, कीबोर्ड दिखाई देता है लेकिन साथ ही आईफ्रेम पुनः लोड हो जाता है और मैं उन इनपुट बॉक्स में कोई डेटा प्रदान नहीं कर सका।

मेरी धारणा से, आईफ्रेम समस्या पैदा कर रहा है जब यह ध्यान केंद्रित करता है। इसलिए, मैंने उस iframe के धुंधला ईवेंट को कैप्चर करने का प्रयास किया और ईवेंट के प्रसार को रोकने का प्रयास किया।

<iframe width="100%" height="100%" [src]="url| safeHtml:'resourceUrl'" (ionBlur)="checkBlur($event)" (ionFocus)="checkFocus($event)"></iframe> 

लेकिन, दोनों आयनफोकस और आयन ब्लर ईवेंट ट्रिगर नहीं कर रहे थे।

अभी के लिए, जब मैंने एंड्रॉइड एप्लिकेशन के साथ प्रयास किया, तो सभी परिदृश्य आईफ्रेम रीलोड को ट्रिगर करते हैं। चूंकि ब्राउज़र में कीबोर्ड दिखाई नहीं देता है, जब मैंने ब्राउज़र के साथ प्रयास किया, केवल परिदृश्य-02 ही iframe पुनः लोड को ट्रिगर करता है।

इफ्रेम केवल पहली बार लोड होना चाहिए। फिर उपयोगकर्ता आईफ्रेम के अंदर या आईफ्रेम के बाहर जो भी ऑपरेशन कर सकता है, लेकिन आईफ्रेम फिर से लोड नहीं होना चाहिए।

आईफ्रेम को फिर से लोड करना कैसे रोकें यदि यह कीबोर्ड या स्लाइडिंग ड्रॉवर या कुछ भी ध्यान केंद्रित करता है?

3
Setu Kumar Basak 13 फरवरी 2019, 12:33

1 उत्तर

सबसे बढ़िया उत्तर

मैंने समाधान निकाला। समस्या safeHtml:'resourceUrl' पाइप में थी। हर बार iframe के फोकस में आने पर यह सैनिटाइज कर रहा था और एक नया ResourceURL तैयार किया। नतीजतन, आईफ्रेम हर बार पुनः लोड हो जाता है।

इसलिए, मैंने पहले से ही url को ts में साफ कर दिया और इसे वेरिएबल पर सेट कर दिया। परिणामस्वरूप, iframe अब पुनः लोड नहीं हो रहा है। मैंने संसाधन url को साफ करने के लिए DomSanitizer का उपयोग किया है।

url: any;

constructor(private domSanitizer: DomSanitizer) {
    this.url= this.getSantizedURL();
}

getSantizedURL() {
   this.domSanitizer.bypassSecurityTrustResourceUrl(mySampleURL);
}
1
Setu Kumar Basak 13 फरवरी 2019, 10:56