objet de localisation
location est l'un des objets de nomenclature les plus utiles, il fournit des informations sur le document chargé dans la fenêtre actuelle et fournit également certaines fonctions de navigation. C'est à la fois l'objet window et la propriété de l'objet document, c'est-à-dire que window.location et document.location font référence au même objet. Ses principales fonctions sont les suivantes :
- Enregistrer les informations du document en cours
- fonction navigation
- analyse des URL
Les attributs
Nom d'attribut | exemple | illustrer |
---|---|---|
hacher | #Contenu | Renvoie le chemin du motif de hachage dans l'url, c'est-à-dire 0 ou une chaîne après le #, si l'url n'est pas un motif de hachage, renvoie une chaîne vide |
héberger | www.wrox.com:80 | Renvoie le nom du serveur et du port |
nom d'hôte | www.wrox.com | Renvoie le nom du serveur sans le numéro de port |
href | http://www.wrox.com | Renvoie l'url complète, location.toString() renvoie cet objet |
chemin d'accès | "/déposer/" | Renvoie le répertoire ou le nom du fichier dans l'URL |
port | 8080 | numéro de port de retour |
protocole | http : | Protocole de retour, généralement http ou https |
recherche | ?=javascript | Renvoie la chaîne de requête de l'URL, se terminant généralement par ? début |
exemple
Prenez Nuggets Address ( https://juejin.cn/search?query=async await&type=0 ) comme exemple, vous pouvez voir location
les paramètres retournés
paramètres de chaîne de requête
Bien que tous les paramètres de requête suivants location.search
soient renvoyés , ils se présentent toujours sous la forme de chaînes et il n'existe aucun moyen d'analyser les paramètres de requête.?
location.search
Les règles de génération des paramètres pour sont les suivantes :
&
paramètre d'épissage- le format est
name=value
- utiliser
encodeURIComponent()
le cryptage
Pour ce faire, vous pouvez créer une fonction de paramètre d'analyse selon les règles générées par les paramètres de requête d'URL , comme suit :
function getQueryStringArgs() {
// 取得要查询的字符串并去掉开头的问号
var qs = (location.search.length > 0 ? location.search.substring(1) : ""),
args = {},
items = qs.length ? qs.split("&"): [],
item = null,
name = null,
value = null,
// 在for 循环中使用
i = 0,
len = items.length;
// 逐个将每一项目添加到args对象中
for (i; i < len; i++) {
item = items[i].split("=");
name = decodeURIComponent(item[0]);
value = decodeURIComponent(items[1]);
if (name.length) {
args[name] = value
}
}
console.log(args);
return args;
}
Record de piétinement
J'ai trouvé un tel passage dans mdn
Les navigateurs modernes fournissent
[URLSearchParams](https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams/get#examples)
une[URL.searchParams](https://developer.mozilla.org/zh-CN/docs/Web/API/URL/searchParams#examples)
interface pour faciliter l'analyse des paramètres de requête à partir des chaînes de requête.
Mais ils ont tous une note ci-dessous:
Donc, en fait, l'utilisation de ces deux fonctions dans la console ne peut pas analyser les paramètres de requête, comme suit :
manipulation de l'emplacement
Sauter— location.assign()
En changeant l'emplacement du navigateur, l'utilisation principale est location.assign(url)
, il renverra probablement les trois résultats suivants :
- Déclencher la fenêtre pour charger et afficher le contenu
url
du - Lorsque le courant
location
eturl
ne sont pas de la même origine, uneSECURITY_ERROR
TypeError - Lorsqu'un invalide est passé dans
url
, unSYNTAX_ERROR
type
remplacer— location.replace()
Remplacez la ressource actuelle. Contrairement à [assign()](https://developer.mozilla.org/zh-CN/docs/Web/API/Location/assign)
la méthode , replace()
après avoir appelé la méthode, la page actuelle ne sera pas enregistrée dans l'historique de la session, c'est-à-dire que le bouton de retour ne peut pas être cliqué pour revenir en arrière
// 语法
object.replace(url);
// 示例
object.replace('http://www.baidu.com');
autre
Vous pouvez changer la page actuellement chargée en modifiant location
d'autres propriétés de l'objet, telles que href
, hash
, search
, pathname
etc.
// 将url改为http://baidu.com
location.href = 'http://baidu.com';
// 改为http://baidu.com/#section
location.hash = '#section';
// 改为http://baidu.com/?keyword=css
location.search = '?keyword=css';
// 改为http://baidu.com/mydir
location.pathname = 'mydir';
// 改为https://juejin.cn/
location.hostname='juejin.cn'
// 将端口改为8080
location.port = '8080'
**Remarque :** Chaque fois location
qu'une propriété est modifiée ( hash
sauf), la page sera rafraîchie
Actualiser la page — location.reload()
Pour actualiser la page en cours de la manière la plus efficace, les principales règles sont les suivantes :
- Lorsque la page n'a pas changé depuis la dernière requête, la page est rechargée depuis le cache du navigateur
- Si la page a changé, rechargez-la depuis le serveur
Il s'agit principalement request header
de juger s'il faut mettre à jour, pour plus de détails, reportez-vous à l'article sur le peignage des connaissances du cache du navigateur
Si vous devez forcer une actualisation, vous pouvez utiliserlocation.reload(true)
**Remarque :** location.reload()
Le code après l'appel peut ne pas être exécuté, en fonction de facteurs tels que la latence du réseau ou les ressources système. Par conséquent, il est préférable de location.reload()
placer la dernière ligne
location.toString()
string
Renvoyez **l'adresse url complète sous la forme ,** comme suit :