Bagaimanakah saya boleh memastikan skrip JavaScript saya dilaksanakan dengan betul dalam peralihan halaman berasaskan AJAX jQuery Mobile?

Linda Hamilton

Lepaskan： 2024-11-11 01:24:02

asal

597 orang telah melayarinya

How can I ensure my JavaScript scripts execute correctly in jQuery Mobile's AJAX-based page transitions?

Tempat Meletakkan Skrip dalam jQuery Mobile

Memahami Perubahan Halaman Mudah Alih jQuery

jQuery Mobile menggunakan AJAX untuk memuatkan halaman. Halaman awal dimuatkan secara konvensional, dengan kedua-dua kandungan HEAD dan BODY dimasukkan ke dalam DOM. Walau bagaimanapun, pemuatan halaman berikutnya hanya mengekstrak kandungan BODY, khususnya, DIV pertama dengan data-role="page." Sebarang kandungan yang tinggal dalam BODY, termasuk skrip tambahan, dibuang.

Kesan pada Pelaksanaan Skrip

Mekanisme ini menerangkan sebab butang boleh dipaparkan tetapi peristiwa kliknya gagal dilaksanakan . Kod acara klik terdapat dalam kandungan HEAD yang dibuang pada halaman kedua.

Penyelesaian 1: Alihkan Skrip ke dalam BODY

Satu penyelesaian ialah mengalihkan teg SCRIPT yang mengandungi kod JavaScript anda ke dalam kandungan BODY setiap halaman berikutnya:

<body>
    <div data-role="page">
        // Rest of HTML content
        <script>
            // JavaScript code
        </script>
    </div>
</body>

Salin selepas log masuk

Walaupun penyelesaian ini pantas, ia boleh mengacaukan HTML.

Penyelesaian 2: Skrip Berpusat dalam Indeks. html

Pendekatan yang lebih teratur melibatkan penyatuan semua JavaScript ke dalam satu fail (cth., index.js) dan memuatkannya ke dalam HEAD halaman awal, selepas jQuery Mobile dimuatkan:

<head>
    <script src="index.js"></script> // Include your JavaScript file
</head>

Salin selepas log masuk

Pendekatan ini lebih baik kerana:

Ia memastikan JavaScript teratur dalam satu fail.
Ia menghalang ralat JavaScript yang disebabkan oleh kehilangan kandungan DOM semasa halaman Phonegap dimuat semula. 🎜>

Penyelesaian 3: Menggunakan rel="external"

Menggunakan rel="external" pada elemen perubahan halaman melumpuhkan pemuatan AJAX dan memaksa gelagat aplikasi web tradisional. Walau bagaimanapun, ini tidak sesuai untuk aplikasi Phonegap.

Penyelesaian Praktikal

Penyelesaian yang paling praktikal ialah menggunakan Penyelesaian 2 tetapi dengan kelainan. Letakkan skrip terpusat di HEAD setiap halaman berikutnya, memastikan semua kod JavaScript yang diperlukan tersedia selepas peralihan halaman, mengurangkan potensi isu yang disebabkan oleh tingkah laku buggy Phonegap.

Fikiran Akhir

Memahami mekanisme pengendalian halaman jQuery Mobile adalah penting untuk membina aplikasi yang berjaya. Dengan mengikuti penyelesaian ini, anda boleh memastikan skrip anda dilaksanakan dengan betul dan mengekalkan pangkalan kod yang teratur dan boleh diselenggara.

Atas ialah kandungan terperinci Bagaimanakah saya boleh memastikan skrip JavaScript saya dilaksanakan dengan betul dalam peralihan halaman berasaskan AJAX jQuery Mobile?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!