Zusammenfassung:
Assets haben eine falsche URL, wenn ich sie mit dem AJAX-basierten Seitennavigationsmodell von jQuery Mobile lade.
Szenario:
2 Websites:
- mydomain.com -> normale Website (kein Problem hier, vergessen Sie es)
- mydomain.com/mobile -> mobile Website
Umsetzung:
Alle mobilen Seiten haben eine saubere URL wie mydomain.com/mobile/page d.h.: meine-domain.de/mobil/home , mydomain.com/mobile/aboutus , meine-domain.de/mobil/kontakt ,...
Alle mobilen Seiten haben also in ihrem "Kopf"-Abschnitt eine Basis-URL wie
<base href="mydomain.com/mobile/" />damit alle Assets mit relativen (und sauberen) URLs arbeiten können.
Was funktioniert:
Beim Zugriff auf Seiten unter Verwendung der vollständigen URL oder bei der Deaktivierung des Seitennavigationsmodells von jQuery Mobile ( $.mobile.ajaxEnabled = false ) funktioniert alles (Links, Assets) wie am Schnürchen.
Das Problem:
Wenn ich das Seitennavigationsmodell von jQuery Mobile nicht deaktiviere, funktioniert die erste mobile Seite, die ich öffne, gut, aber danach, wenn ich einem Link auf der Seite folge, wird die neue Seite über Ajax geladen und in das DOM injiziert, aber alle Assets/Links mit relativer (und sauberer) URL funktionieren nicht mehr. Sie haben eine falsche URL.
Beispiel:
Wenn ich besuche mydomain.com/mobile/aboutus die " über uns " hat ein Logobild mit der relativen Url logo.png (die absolute Zahl wäre meine-domain.de/mobil/logo.png ), die korrekt angezeigt wird. Aber wenn ich besuche meine-domain.de/mobil/home und ich klicke auf einen Link zu mydomain.com/mobile/aboutus , die " über uns "Die Seite wird geladen, aber die URL des Logobildes wird geändert in überlogo.png statt der richtigen logo.png
Referenz: http://jquerymobile.com/test/docs/pages/docs-navmodel.html
Ein weiterer wichtiger Bestandteil von jQuery Mobile Seitennavigationsmodells ist die Basiselement, das in den Kopf eingefügt und bei jedem Seitenwechsel modifiziert ändern, um sicherzustellen, dass alle Assets (css, images, js, etc), die auf dieser Seite referenziert werden Seite referenziert werden, von einem richtigen Pfad angefordert werden. In Browsern, die keine Unterstützung für dynamische Aktualisierungen des Basiselements (wie z. B. Firefox 3.6), durchläuft jQuery Mobile eine Schleife durch alle referenzierten Elemente auf der Seite durch und setzt deren href und src Attribute mit dem Basis Pfad.
Frage:
Mache ich es falsch? Ist das ein Fehler oder habe ich die Dokumentation falsch verstanden? Wie kann ich die über AJAX geladenen Assets dazu bringen, die richtige URL zu haben?
Ich möchte das Seitennavigationsmodell von jQuery Mobile verwenden, um die ausgefallenen Übergänge in den mobilen Browsern zu haben.
Zeig mir den Code!:
meine-domain.de/mobil/home Code:
<!DOCTYPE html>
<head>
<base href="http://mydomain.com/mobile/" />
<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css">
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="jquery.mobile-1.0a3.min.js"></script>
...
</head>
<body>
<div id="home" data-role="page">
<div data-role="header">Foo</div><!--header -->
<div data-role="content">
<a href="about">About us</a>
</div><!--content -->
<div data-role="footer">Bar</div><!--footer -->
</div><!--page -->
</body>
</html>meine-domain.de/mobil/ueber Code:
<!DOCTYPE html>
<head>
<base href="http://mydomain.com/mobile/" />
<link rel="stylesheet" href="jquery.mobile-1.0a3.min.css">
<script src="http://code.jquery.com/jquery-1.5.min.js"></script>
<script src="jquery.mobile-1.0a3.min.js"></script>
...
</head>
<body>
<div id="about" data-role="page">
<div data-role="header">Foo</div><!--header -->
<div data-role="content">
<img src="logo.png" alt=""/><!--broken when loaded via AJAX-->
<a href="home" data-role="button" data-rel="back">Back</a><!--broken when loaded via AJAX-->
</div><!--content -->
<div data-role="footer">Bar</div><!--footer -->
</div><!--page -->
</body>
</html>
