Bagaimana untuk Memaparkan iFrame dengan betul dalam Safari Mudah Alih?

Memaparkan iFrame dalam Safari Mudah Alih dengan betul

Aplikasi web mudah alih sering menghadapi cabaran apabila memaparkan iFrames, khususnya dalam mengehadkan saiznya dan membenarkan penatalan lancar dalam diri mereka. Artikel ini menangani isu ini, meneroka penyelesaian yang berkesan untuk mengekang iFrames.

Isunya

Seperti yang ditunjukkan oleh coretan kod yang disediakan, menambahkan atribut ketinggian dan lebar pada elemen iFrame tiada kesan. Membungkus iFrame dalam div membenarkan kekangan, tetapi menghalang tatal dalam iFrame.

Penyelesaian

Untuk paparan iFrame yang berkesan dalam Safari mudah alih, pendekatan berikut boleh digunakan:

• Selitkan iFrame dalam div (#scroller).
• Laksanakan JavaScript dalam kandungan iFrame untuk menyampaikan acara menatal kepada div induk.

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

HTML

<div>

Dengan merangkumi iFrame dalam div dan melaksanakan JavaScript yang ditentukan, pembangun boleh dengan betul paparkan iFrames dalam Safari mudah alih, menangani kedua-dua kekangan saiz dan keperluan menatal.

Atas ialah kandungan terperinci Bagaimana untuk Memaparkan iFrame dengan betul dalam Safari Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!