Bagaimana untuk Mendayakan Tatal dan Kawal Dimensi iFrame dalam Safari Mudah Alih?

Mengatasi Cabaran Paparan iFrame dalam Safari Mudah Alih

Apabila cuba untuk memasukkan iFrame ke dalam aplikasi web mudah alih, ia adalah perkara biasa untuk menghadapi kesukaran dalam mengawal dimensinya dan membolehkan menatal dalam ia.

Dimensi Terkekang

Bertentangan dengan jangkaan, menetapkan atribut ketinggian dan lebar elemen iFrame sahaja tidak akan mengehadkan saiznya pada skrin iPhone. Sebaliknya, melampirkannya dalam elemen div membolehkan pembendungan saiz yang berkesan.

Mendayakan Fungsi Tatal

Walau bagaimanapun, memperkenalkan kekangan div melumpuhkan penatalan dalam iFrame. Untuk mengatasinya, langkah berikut boleh diambil:

Dalam kandungan iframe:

• Laksanakan fungsi JavaScript yang berkomunikasi dengan tetingkap induk untuk memulakan penatalan berdasarkan peristiwa sentuhan.

Tetingkap induk (di luar iframe):

• Masukkan kod JavaScript ke dalam kandungan iframe.
• Tentukan div boleh tatal untuk melampirkan iFrame. Apabila peristiwa sentuhan dikesan, kira pelarasan kedudukan tatal dan kemas kini sifat tatal Atas atau Tatal Kiri div dengan sewajarnya.

Kod Contoh:

JavaScript (iframe kandungan):

setTimeout(function() {
    var startY = 0, startX = 0;
    var b = document.body;
    b.addEventListener('touchstart', function(event) {
        parent.window.scrollTo(0, 1); // Trigger parent scrolling.
        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 (tetingkap induk):

<div>

Pendekatan ini membenarkan kedua-dua dimensi terhad dan menatal dalam iFrame dalam Mudah Alih Safari.

Kemas Kini iOS 6 Nota:

Perlu diperhatikan bahawa penyelesaian ini mungkin tidak berfungsi dengan iOS 6 disebabkan oleh perubahan dalam platform. Pemeriksa Web Jauh juga tidak lagi tersedia, menjadikannya mencabar untuk menyahpepijat isu JavaScript pada peranti.

Atas ialah kandungan terperinci Bagaimana untuk Mendayakan Tatal dan Kawal Dimensi iFrame dalam Safari Mudah Alih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!