Bagaimana untuk Melaksanakan Tatal Di Dalam iFrame pada Safari Mudah Alih?

Memaparkan iFrames dalam Safari Mudah Alih

Apabila cuba membenamkan iFrame dalam aplikasi web mudah alih menggunakan Safari pada peranti iOS, satu cabaran biasa timbul: mengehadkan dimensi iFrame kepada muatkan skrin iPhone. Atribut ketinggian dan lebar dalam elemen iFrame selalunya tidak mempunyai kesan.

Walau bagaimanapun, penyelesaian mudah terletak pada melampirkan iFrame dalam elemen div. Ini membenarkan kawalan saiz iFrame, tetapi ia menimbulkan isu baharu: ketidakupayaan untuk menatal dalam iFrame.

Untuk menangani isu ini, laksanakan langkah berikut:

1. Balut iFrame dalam div dengan ketinggian dan lebar yang ditentukan untuk mengekangnya dimensi.
2. Dalam kandungan iFrame, laksanakan JavaScript untuk berkomunikasi dengan induk div yang dilampirkan.
3. Tambahkan pendengar peristiwa sentuhan pada badan iFrame untuk menangkap peristiwa sentuhan dan mengemas kini kedudukan tatal ibu bapa dengan sewajarnya.

Di bawah ialah contoh kod JavaScript dan HTML untuk dicapai ini:

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

Sila ambil perhatian bahawa jika anda tidak mengawal kandungan iFrame, anda boleh melaksanakan tindanan sebaliknya. Walau bagaimanapun, penyelesaian ini tidak akan membenarkan interaksi dengan kandungan iFrame, selain daripada menatal.

Atas ialah kandungan terperinci Bagaimana untuk Melaksanakan Tatal Di Dalam iFrame pada Safari Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!