Emplacement Objet Explication détaillée

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 :

1. Enregistrer les informations du document en cours
2. fonction navigation
3. 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 locationles paramètres retournés

paramètres de chaîne de requête

Bien que tous les paramètres de requête suivants location.searchsoient 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.searchLes règles de génération des paramètres pour sont les suivantes :

1. &paramètre d'épissage
2. le format estname=value
3. 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 :

1. Déclencher la fenêtre pour charger et afficher le contenu urldu
2. Lorsque le courant locationet urlne sont pas de la même origine, une SECURITY_ERRORTypeError
3. Lorsqu'un invalide est passé dans url, un SYNTAX_ERRORtype

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 locationd'autres propriétés de l'objet, telles que href, hash, search, pathnameetc.

// 将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 locationqu'une propriété est modifiée ( hashsauf), 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 :

1. Lorsque la page n'a pas changé depuis la dernière requête, la page est rechargée depuis le cache du navigateur
2. Si la page a changé, rechargez-la depuis le serveur

Il s'agit principalement request headerde 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()

stringRenvoyez **l'adresse url complète sous la forme ,** comme suit :