عرض إطارات iFrame في Mobile Safari

عند محاولة تضمين iFrame داخل تطبيق ويب للجوال باستخدام Safari على أجهزة iOS، يظهر تحدي شائع: تقييد أبعاد iFrame على تناسب شاشة اي فون. غالبًا ما لا يكون لسمات الارتفاع والعرض داخل عنصر iFrame أي تأثير.

ومع ذلك، يكمن الحل البسيط في تضمين iFrame داخل عنصر div. يسمح هذا بالتحكم في حجم iFrame، ولكنه يثير مشكلة جديدة: عدم القدرة على التمرير داخل iFrame.

لمعالجة هذه المشكلة، قم بتنفيذ الخطوات التالية:

1. لف iFrame في div بارتفاع وعرض محددين لتقييد أبعاده.
2. ضمن محتوى iFrame، قم بتطبيق JavaScript للتواصل مع أصل div المتضمن.
3. أضف مستمع حدث اللمس إلى جسم iFrame لالتقاط أحداث اللمس وتحديث موضع تمرير الوالدين وفقًا لذلك.

فيما يلي مثال على كود JavaScript وHTML لتحقيق ذلك:

// 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);

يُرجى ملاحظة أنه إذا لم تكن تتحكم في محتوى iFrame، فيمكنك تنفيذ التراكب بدلاً من ذلك. ومع ذلك، لن يسمح هذا الحل بالتفاعل مع محتوى iFrame، باستثناء التمرير.