위치 객체

location은 가장 유용한 BOM 객체 중 하나로 현재 창에 로드된 문서에 대한 정보를 제공하고 몇 가지 탐색 기능도 제공합니다. 이것은 창 개체이자 문서 개체의 속성입니다. 즉, window.location과 document.location은 동일한 개체를 참조합니다. 주요 기능은 다음과 같습니다.

현재 문서의 정보를 저장
내비게이션 기능
URL 구문 분석

속성

속성 이름	예	설명하다
해시시	#내용물	url에 해시 패턴의 경로 즉, 0 또는 # 뒤의 문자열을 반환하고, URL이 해시 패턴이 아니면 빈 문자열을 반환합니다.
주인	www.wrox.com:80	서버 및 포트 이름을 반환합니다.
호스트 이름	www.wrox.com	포트 번호 없이 서버 이름을 반환합니다.
헥사	http://www.wrox.com	전체 URL을 반환합니다. location.toString()은 이 객체를 반환합니다.
경로명	"/파일/"	URL의 디렉토리 또는 파일 이름을 반환합니다.
포트	8080	반환 포트 번호
규약	http:	반환 프로토콜(일반적으로 http 또는 https)
찾다	?=자바스크립트	일반적으로 ?로 끝나는 URL 쿼리 문자열을 반환합니다. 시작

예

Nuggets 주소( https://juejin.cn/search?query=async await&type=0 )를 예로 들면 location반환된 매개변수를 볼 수 있습니다.

여기에 이미지 설명 삽입

쿼리 문자열 매개변수

모든 후속 검색어 매개변수가 location.search반환되지만 항상 문자열 형식이며 검색어 매개변수를 파싱할 방법이 없습니다.?

location.search에 대한 매개변수 생성 규칙은 다음과 같습니다.

접합 매개 &변수
형식은name=value
encodeURIComponent()암호화 사용

이렇게 하려면 다음과 같이 URL 쿼리 매개변수에 의해 생성된 규칙에 따라 구문 분석 매개변수 함수를 만들 수 있습니다.

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

기록 짓밟기

mdn에서 그런 구절을 찾았습니다.

최신 브라우저 [URLSearchParams](https://developer.mozilla.org/zh-CN/docs/Web/API/URLSearchParams/get#examples)는 [URL.searchParams](https://developer.mozilla.org/zh-CN/docs/Web/API/URL/searchParams#examples)쿼리 문자열에서 쿼리 매개변수를 더 쉽게 구문 분석할 수 있도록 인터페이스를 제공합니다.

그러나 그들은 모두 아래에 메모가 있습니다.

여기에 이미지 설명 삽입

따라서 실제로 콘솔에서 이 두 함수를 사용하면 다음과 같이 쿼리 매개변수를 구문 분석할 수 없습니다.
여기에 이미지 설명 삽입

위치 조작

점프 - location.assign()

브라우저 위치 변경, 주요 사용법은 location.assign(url)다음 세 가지 결과를 반환합니다.

창을 트리거하여 지정된 콘텐츠 url를
현재 location와 url동일한 출처가 아닌 경우 SECURITY_ERRORTypeError
유효하지 않은 것이 전달되면 유형이url 발생합니다.SYNTAX_ERROR

바꾸기 - location.replace()

현재 리소스를 교체합니다. [assign()](https://developer.mozilla.org/zh-CN/docs/Web/API/Location/assign)메서드 replace()메서드를 호출한 후 현재 페이지는 세션 기록에 저장되지 않습니다. 즉, 뒤로 가기 버튼을 클릭하여 뒤로 이동할 수 없습니다.

// 语法
object.replace(url);

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

다른

, , 등 location개체의 다른 속성을 수정하여 현재 로드 된 페이지를 변경할 수 있습니다.hrefhashsearchpathname

// 将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'

location**참고:** 속성이 수정될 때마다 ( hash제외) 페이지가 새로고침됩니다.
여기에 이미지 설명 삽입

페이지 새로 고침 — location.reload()

가장 효율적인 방법으로 현재 페이지를 새로 고치기 위한 기본 규칙은 다음과 같습니다.

마지막 요청 이후 페이지가 변경되지 않은 경우 페이지가 브라우저 캐시에서 다시 로드됩니다.
페이지가 변경된 경우 서버에서 새로고침

이것은 주로 request header업데이트 여부를 판단하는 것입니다. 자세한 내용은 브라우저 캐시 지식 빗질에 대한 기사를 참조하십시오.

강제로 새로 고침해야 하는 경우 다음을 사용할 수 있습니다.location.reload(true)

**참고:** location.reload()네트워크 대기 시간이나 시스템 리소스와 같은 요인에 따라 호출 후 코드가 실행되지 않을 수 있습니다. location.reload()따라서 마지막 줄을 배치하는 것이 가장 좋습니다.

위치.toString()

string다음과 같이 **전체 URL 주소를 ,** 형식으로 반환합니다 .
여기에 이미지 설명 삽입

위치 객체 상세 설명