Die URL zum erneuten Schreiben von .htaccess führt zu fehlendem CSS

10

Ich versuche meine URL daraus zu machen:

example.com/view.php?id=15

Dazu:

example.com/watch/15

Mein Code .htaccesslautet wie folgt:

Options -Indexes
Options +FollowSymlinks
RewriteEngine On
RewriteRule ^watch/([^/]+) view.php?id=$1 [NC]

Wenn ich jetzt dazu gehe, example.com/watch/15wird der Inhalt geladen, jedoch ohne JS, CSS, da in diesem Fall unter dem /watchnicht vorhandenen Ordner nach CSS und JS gesucht wird.

Wie kann ich sicherstellen, dass diese Option ordnungsgemäß funktioniert? Ich möchte keinen Überwachungsordner erstellen und CSS und JS kopieren und einfügen, damit es ordnungsgemäß eingebettet wird.

htaccess relative-urls StuckBetweenTrees
quelle
1
Machen Sie Ihre JS- und CSS-Verweise zu vollständigen URLs anstatt zu relativen.
Closetnoc
... oder fügen Sie das baseElement ein, das auf die Basis-URL verweist, auf die sich alle relativen URLs beziehen. @closetnoc sollten Sie das als Antwort hinzufügen.
MrWhite
@ w3d Oder vielleicht, weil ich nicht sicher bin, was du gerade gesagt hast, kannst du es vielleicht in eine Antwort setzen. ;-) Ich verspreche, es zu verbessern ! Ich könnte es besser verstehen, wenn sich der Nebel hebt - ich bin gerade von einem langen Nickerchen nach 2 Nächten mit jeweils nur etwa 5 Stunden Schlaf aufgestanden.
Schranknoc

Antworten:

10

Das Nichtfinden Ihrer JavaScript- und CSS-Dateien ist ein clientseitiges / Browser-Problem im Zusammenhang mit Ihrem URL-Pfad. Es sollte nicht behoben werden .htaccess(zumindest nicht in diesem Fall) - obwohl dies daran liegt, dass Sie dies ändern URL-Pfad (in .htaccess), in dem dieses Problem auftritt.

Wie @closetnoc in Kommentaren vorgeschlagen hat, wird dieses Problem durch die Verwendung relativer URLs in Ihrem HTML verursacht. Relativ zu was? Denken Sie daran, dass es der Benutzeragent / Browser ist, der relative URLs in Ihrem HTML auflöst, nicht der Server. Sie müssen also Ihre URLs korrigieren. nicht .htaccess.

Wenn Sie beispielsweise auf Ihre CSS-Datei mit einer relativen URL des Formulars verweisen href="styles.css"(Hinweis, kein Schrägstrichpräfix) und sich derzeit an der URL befinden, löst example.com/view.php?id=15der Browser Ihre CSS-URL und -Anforderung natürlich auf example.com/styles.css(im Dokumentstamm). Wenn Sie sich jedoch derzeit an der URL befinden example.com/watch/15(effektiv in einem /watch"Unterverzeichnis" [* 1] ), löst der Browser Ihre relative CSS-URL relativ zu einem /watchUnterverzeichnis und nicht zum Dokumentstamm auf, sodass Sie ein absolutes / aufgelöstes Ergebnis erhalten URL des Formulars example.com/watch/styles.css.

( [* 1] Beachten Sie, dass "Unterverzeichnis" in diesem Zusammenhang nicht unbedingt ein physisches Unterverzeichnis auf Ihrem Server ist - es ist ein "Unterverzeichnis" im URL-Pfad; ein zusätzliches Pfadsegment. Der Browser kennt den Unterschied jedoch nicht. )

Gleiches gilt, wenn Sie relative URLs in Ihren benutzerdefinierten Fehlerdokumenten verwenden (definiert mit der ErrorDocumentDirektive auf Apache). Das benutzerdefinierte Fehlerdokument kann möglicherweise für jede URL aufgerufen werden, sodass jede relative URL zu einer statischen Ressource (CSS, Bild, JS usw.) relativ zur URL ist, die den Fehler verursacht hat, und nicht relativ zum Fehlerdokument selbst (dessen Standort dem Benutzeragenten effektiv verborgen bleibt).

Wenn Sie Ihre JavaScript- und CSS-URLs so ändern, dass sie root-relativ (beginnend mit einem Schrägstrich) oder sogar absolut sind, tritt dieses Problem nicht auf. Dies wäre die bevorzugte Methode. Alternativ können Sie das baseElement ...

base Tag / Element

Alternativ können Sie ein baseElement in den headAbschnitt Ihres HTML-Dokuments aufnehmen (obwohl dies nicht ohne Einschränkungen ist [* 2] ). Dies verweist auf die absolute URL, zu der alle relativen URLs relativ sind. Mit anderen Worten, da Sie erwarten, dass diese relativen URLs relativ zum Dokumentstamm sind, fügen Sie dem headAbschnitt Folgendes hinzu :

<base href="http://example.com/">

Jetzt wird eine relative URL, wie sie styles.cssin einem Dokument unter URL angegeben /watch/15ist http://example.com/styles.css, nicht mehr angefordert http://example.com/watch/styles.css.

[* 2] Es gibt jedoch einige Einschränkungen bei der Verwendung desbaseElements. Ein Hauptanliegen ist, dass jede relative URL, die auf das aktuelle Dokument abzielensoll,jetzt stattdessen auf die Basis-URL abzielt. Dies kann sich auf In-Page-Anker wiehref="#top"und URLs des Formularshref="?sortby=date"usw.auswirken. Und auch aufformElemente, die sich mit einem leerenactionAttribut (z. B.<form action="" ...)an sich selbst senden. Diese relativen URLs, die auf das aktuelle Dokument abzielen, müssen so geändert werden, dass sie die vollständige URL der aktuellen Seite enthalten (was möglicherweise den Sinn der Verwendung desbaseTags als Problemumgehung zunichte macht).

Referenz:

Herr weiß
quelle
1
Ja, es funktioniert, wenn ich im Kopfbereich eine Basis hinzufüge. Ich habe 2 Stunden damit verbracht, es herauszufinden, und doch ist es einfach, 1 Codezeile hinzuzufügen ... Vielen Dank für Ihre informative Antwort!
StuckBetweenTrees