Objeto de ubicación Explicación detallada

objeto de ubicación

La ubicación es uno de los objetos BOM más útiles, proporciona información sobre el documento cargado en la ventana actual y también proporciona algunas funciones de navegación. Es tanto el objeto ventana como la propiedad del objeto documento, es decir, ventana.ubicación y documento.ubicación se refieren al mismo objeto. Sus principales funciones son las siguientes:

1. Guardar la información del documento actual
2. función de navegación
3. análisis de URL

Atributos

Nombre del Atributo	ejemplo	ilustrar
picadillo	#contenido	Devuelve la ruta del patrón hash en la url, es decir, 0 o una cadena después del #, si la url no es un patrón hash, devuelve una cadena vacía
anfitrión	www.wrox.com:80	Devuelve el servidor y el nombre del puerto.
nombre de host	www.wrox.com	Devuelve el nombre del servidor sin el número de puerto
href	http://www.wrox.com	Devuelve la URL completa, location.toString() devuelve este objeto
nombre de ruta	"/archivo/"	Devuelve el directorio o el nombre del archivo en la URL
puerto	8080	número de puerto de retorno
protocolo	http:	Protocolo de retorno, generalmente http o https
buscar	?=javascript	Devuelve la cadena de consulta de la URL, que generalmente termina en ? comienzo

ejemplo

Tome la dirección de Nuggets ( https://juejin.cn/search?query=async await&type=0 ) como ejemplo, puede ver locationlos parámetros devueltos

parámetros de cadena de consulta

Aunque location.searchse devolverán ?todos los parámetros de consulta subsiguientes , siempre tienen la forma de cadenas y no hay forma de analizar los parámetros de consulta.

location.searchLas reglas de generación de parámetros para son las siguientes:

1. &parámetro de empalme
2. el formato esname=value
3. usar encodeURIComponent()encriptación

Para hacer esto, puede crear una función de parámetro de análisis de acuerdo con las reglas generadas por los parámetros de consulta de URL , de la siguiente manera:

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;
}

Récord de pisoteo

Encontré tal pasaje en mdn

Los navegadores modernos proporcionan [URLSearchParams](https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams/get#examples)una [URL.searchParams](https://developer.mozilla.org/zh-CN/docs/Web/API/URL/searchParams#examples)interfaz para facilitar el análisis de los parámetros de consulta de las cadenas de consulta.

Pero todos tienen una nota a continuación:

Entonces, de hecho, usar estas dos funciones en la consola no puede analizar los parámetros de consulta, de la siguiente manera:

manipulación de ubicación

Saltar: ubicación.assign()

Al cambiar la ubicación del navegador, el uso principal es location.assign(url), probablemente arrojará los siguientes tres resultados:

1. Activar la ventana para cargar y mostrar el contenido urlde
2. Cuando la corriente locationy urlno sean del mismo origen, se lanzará un SECURITY_ERRORTypeError
3. Cuando se pasa uno inválido url, se lanza un SYNTAX_ERRORtipo

reemplazar— ubicación.reemplazar()

Reemplace el recurso actual. A diferencia [assign()](https://developer.mozilla.org/zh-CN/docs/Web/API/Location/assign)del método , replace()después de llamar al método, la página actual no se guardará en el historial de la sesión, es decir, no se puede hacer clic en el botón Atrás para volver

// 语法
object.replace(url);

// 示例
object.replace('http://www.baidu.com');

otro

Puede cambiar la página cargada actualmente modificando locationotras propiedades del objeto, como 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'

**Nota:** Cada vez que locationse modifica una propiedad ( hashexcepto), la página se actualizará

Actualizar la página — ubicación.recargar()

Para actualizar la página actual de la manera más eficiente, las reglas principales son las siguientes:

1. Cuando la página no ha cambiado desde la última solicitud, la página se vuelve a cargar desde el caché del navegador
2. Si la página ha cambiado, recárgala desde el servidor

Esto es principalmente request headerpara juzgar si actualizar, para obtener más detalles, consulte el artículo sobre combinación de conocimiento de caché del navegador

Si necesita forzar una actualización, puede usarlocation.reload(true)

**Nota:** location.reload()Es posible que no se ejecute el código posterior a la llamada, según factores como la latencia de la red o los recursos del sistema. Por lo tanto, es mejor location.reload()colocar la última línea

ubicación.toString()

stringDevuelva **la dirección URL completa en forma de,** de la siguiente manera :