Erstellen eines neuen Location-Objekts in Javascript
Lesezeit: 3 Minuten
Josh Johnson
Ist es möglich, ein neues Location-Objekt in Javascript zu erstellen? Ich habe eine URL als Zeichenfolge und möchte das, was Javascript bereits bietet, nutzen, um Zugriff auf die verschiedenen Teile davon zu erhalten.
Hier ist ein Beispiel dafür, wovon ich spreche (ich weiß, dass das nicht funktioniert):
var url = new window.location("http://www.example.com/some/path?name=value#anchor");
var protocol = url.protocol;
var hash = url.hash;
// etc etc
Ist so etwas möglich oder müsste ich dieses Objekt im Wesentlichen selbst erstellen?
Nun, Sie könnten ein Ankerelement verwenden, um die URL-Teile zu extrahieren, zum Beispiel:
var url = document.createElement('a');
url.href = "http://www.example.com/some/path?name=value#anchor";
var protocol = url.protocol;
var hash = url.hash;
alert('protocol: ' + protocol);
alert('hash: ' + hash);
Es funktioniert auf allen modernen Browsern und sogar auf IE 5.5+.
+1 was ich geschrieben habe. Dass <a> Elemente implementieren die location URL-Zerlegungsattribute gehen auf die frühesten JavaScript-Versionen zurück und werden überall unterstützt. Es ist (endlich!) in der HTML5-Spezifikation standardisiert.
– Spule
9. Juli ’10 um 14:41
+1. Dito. das hatte ich nicht gewusst <a> implementierten Standort entweder.
– Josh Johnson
9. Juli ’10 um 15:11
Ich glaube, ich habe dies einmal versucht und dann festgestellt, dass ich dies für den IE zum DOM hinzufügen muss, bevor es funktioniert. Vielleicht muss ich es nochmal versuchen.
– donquijote
16. Okt. ’11 um 19:43
Ein wichtiger Hinweis: Internet Explorer hat anscheinend einen Fehler, bei dem der führende Schrägstrich im Pfadnamensattribut bei Objekten wie diesem weggelassen wird. Sie können es normalisieren, indem Sie Folgendes tun: url.pathname = url.pathname.replace(/(^/?)/,"/");
var url = new URL("http://www.example.com/some/path?name=value#anchor");
var protocol = url.protocol;
var hash = url.hash;
Warnung: Diese Schnittstelle ist ein bisschen neu. Wenn Sie also keinen Transpiler verwenden, überprüfen Sie bitte die Kompatibilitätstabelle und führen Sie Ihre Tests in Zielbrowsern durch.
Solange Sie Internet Explorer nicht unterstützen müssen, ist dies definitiv die beste Lösung. Die URL-Schnittstelle verwendet dieselben Eigenschaftsnamen wie Location, ist also vollständig abwärtskompatibel, fügt aber auch ein sehr nützliches . hinzu searchParams Eigentum.
– Hayden Schiff
5. Dez. ’18 um 23:55
Vergiss nicht die new in new URL(.
– Boris
23. Okt. 19 um 19:09 Uhr
Sie können die Kraft eines Ankerelements nutzen
var aLink = document.createElement("a");
aLink.href="http://www.example.com/foo/bar.html?q=123#asdf";
alert(aLink.pathname);
Sie können es in einer Regex analysieren, um die Teile als Übereinstimmungen zu erhalten … Ich habe derzeit nicht den vollständigen Code, aber dies kann verwendet werden, um die Abfragedaten abzurufen:
var myUrl = window.location.href;
var matches = myUrl.match(/([^?]+)?(.+)/);
var queryData = matches[2];
Streichhölzer[0] ist die vollständige Zeichenfolge, match(1) ist der erste Teil der URL (bis auf das ?) … Sie könnten einen regulären Ausdruck erstellen, um jeden Teil einer Zeichenfolgen-URL zu analysieren, wenn Sie möchten …
Sie können dafür auch eine der vielen Bibliotheken verwenden, die es bereits gibt.
.
3679100cookie-checkErstellen eines neuen Location-Objekts in Javascriptyes
