In jQuery Mobile-Projekten kann es bei der Umleitung zwischen Seiten mithilfe von $.mobile.changepage zu Verwirrung kommen . Unerwarteterweise werden Skripte von der umgeleiteten Seite nicht ausgeführt, sodass Sie keine Ahnung haben.
Um diese Situation zu verstehen, ist es wichtig, den Seitenverarbeitungsmechanismus von jQuery Mobile zu verstehen. Es verwendet AJAX, um nachfolgende Seiten zu laden. Während die erste Seite konventionell geladen wird, erhalten nachfolgende nur ihren BODY-Inhalt (insbesondere das erste DIV mit einem data-role="page"-Attribut), während der HEAD-Inhalt ignoriert wird.
Das bedeutet, dass Skripte Der im BODY-Inhalt der umgeleiteten Seite definierte Befehl wird nicht ausgeführt. Der Grund dafür ist, dass ihr übergeordneter HEAD, der die notwendigen Bibliotheken enthält, während des Seitenübergangs nicht geladen wird.
Um dieses Problem zu beheben, verschieben Sie das SCRIPT-Tag für die umgeleitete Seite in ihren BODY-Inhalt:
<body>
<div data-role="page">
// Other HTML content
<script>
// Javascript code
</script>
</div>
</body>Obwohl diese Lösung funktioniert, kann sie möglicherweise den HTML-Code mit mehreren SCRIPTs überladen Tags.
Ein besserer Ansatz besteht darin, die gesamte JavaScript-Logik in index.html zu zentralisieren, indem Sie sie in eine separate JS-Datei im HEAD einfügen:
<head>
<meta name="viewport" ...>
<link rel="stylesheet" href="jquery.mobile-1.2.0.min.css">
<script src="jquery.mobile-1.2.0.min.js"></script>
<script src="index.js"></script> // Custom JS file
</head>Während Lösung 2 Skripte konsolidiert, bleibt es wichtig, sie einzubeziehen sie in index.html. Dies liegt vor allem an der fehlerhaften Natur von Phonegap. Im Falle eines Fehlers aktualisiert Phonegap möglicherweise die aktuelle Seite und verliert dabei ihr DOM. Jeglicher JavaScript-Code, der nicht im HEAD der aktualisierten Seite vorhanden ist, wird nicht ausgeführt.
Durch die Zentralisierung von Skripten in index.html werden die erforderlichen Bibliotheken immer im HEAD geladen, wodurch eine unterbrechungsfreie Funktionalität auch nach möglichen Phonegap-Fehlern gewährleistet wird .
Das obige ist der detaillierte Inhalt vonWarum sollten Ihre JavaScript-Skripte in index.html in jQuery Mobile-Projekten enthalten sein?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
