मोबाइल सफारी में आईफ्रेम प्रदर्शित करना

आईओएस उपकरणों पर सफारी का उपयोग करके मोबाइल वेब एप्लिकेशन के भीतर आईफ्रेम को एम्बेड करने का प्रयास करते समय, एक आम चुनौती उत्पन्न होती है: आईफ्रेम के आयामों को सीमित करना iPhone स्क्रीन में फ़िट करें. iFrame तत्व के भीतर ऊंचाई और चौड़ाई विशेषताओं का अक्सर कोई प्रभाव नहीं पड़ता है।

हालाँकि, एक सरल समाधान iFrame को एक div तत्व के भीतर संलग्न करना है। यह iFrame के आकार को नियंत्रित करने की अनुमति देता है, लेकिन यह एक नया मुद्दा उठाता है: iFrame के भीतर स्क्रॉल करने में असमर्थता।

इस समस्या को हल करने के लिए, निम्नलिखित चरणों को निष्पादित करें:

1. इसके आयामों को सीमित करने के लिए iFrame को एक निर्दिष्ट ऊंचाई और चौड़ाई के साथ एक div में लपेटें। स्पर्श घटनाओं को कैप्चर करने और तदनुसार पैरेंट की स्क्रॉल स्थिति को अपडेट करने के लिए iFrame बॉडी।
2. इसे प्राप्त करने के लिए नीचे जावास्क्रिप्ट और HTML कोड का एक उदाहरण दिया गया है:
3. // जावास्क्रिप्ट सेटटाइमआउट(फ़ंक्शन() { वर प्रारंभY = 0; वर स्टार्टएक्स = 0; वर बी = दस्तावेज़.बॉडी; b.addEventListener("टचस्टार्ट", फ़ंक्शन (इवेंट) { माता-पिता.विंडो.स्क्रॉलटू(0, 1); स्टार्टवाई = इवेंट.टार्गेटटच[0].पेजवाई; स्टार्टएक्स = इवेंट.टार्गेटटच[0].पेजएक्स; }); b.addEventListener("touchmove", फ़ंक्शन (इवेंट) { इवेंट.preventDefault(); var पॉसी = इवेंट.targetTouches[0].pageY; var h =parent.document.getElementById("स्क्रोलर"); var sty = h.scrollTop; var posx = इवेंट.targetTouches[0].pageX; var stx = h.scrollLeft; h.scrollTop = sty - (पॉसी - स्टार्टवाई); h.scrollLeft = stx - (posx -startX); स्टार्टवाई = पोज़ी; स्टार्टएक्स = पॉज़एक्स; }); }, 1000);

// JavaScript
setTimeout(function () {
  var startY = 0;
  var startX = 0;
  var b = document.body;
  b.addEventListener("touchstart", function (event) {
    parent.window.scrollTo(0, 1);
    startY = event.targetTouches[0].pageY;
    startX = event.targetTouches[0].pageX;
  });
  b.addEventListener("touchmove", function (event) {
    event.preventDefault();
    var posy = event.targetTouches[0].pageY;
    var h = parent.document.getElementById("scroller");
    var sty = h.scrollTop;

    var posx = event.targetTouches[0].pageX;
    var stx = h.scrollLeft;
    h.scrollTop = sty - (posy - startY);
    h.scrollLeft = stx - (posx - startX);
    startY = posy;
    startX = posx;
  });
}, 1000);