JS_javascript 스킬에서 Location 사용에 대한 자세한 설명

JavaScript의 위치 주소 개체는 특정 창 개체가 연 주소를 설명합니다. 현재 창의 주소를 나타내려면 "location"을 사용하고, 특정 창의 주소를 나타내려면 ".location"을 사용하세요.

1. JS에서 Location의 의미

1. Location 개체는 Window 개체의 Location 속성에 저장되며 현재 해당 창에 표시되는 문서의 웹 주소를 나타냅니다. href 속성은 문서의 전체 URL을 저장하고 다른 속성은 URL의 다양한 부분을 설명합니다. 이러한 속성은 Anchor 개체(또는 Area 개체)의 URL 속성과 매우 유사합니다. Location 객체가 문자열로 변환되면 href 속성의 값이 반환됩니다. 즉, location.href 대신 location 표현식을 사용할 수 있습니다.

2. Anchor 개체는 문서의 하이퍼링크를 나타내고 Location 개체는 현재 브라우저에 표시되는 문서의 URL(또는 위치)을 나타냅니다. 그러나 Location 개체는 그 이상을 수행할 수 있으며 브라우저에 표시되는 문서의 위치를 ​​제어할 수도 있습니다. URL이 포함된 문자열이 Location 개체 또는 해당 href 속성에 할당되면 브라우저는 새 URL이 가리키는 문서를 로드하여 표시합니다.

3. 현재 URL을 전체 URL로 대체하기 위해 location 또는 location.href를 설정하는 것 외에도 위치 개체의 다른 속성에 값을 할당하여 URL의 일부를 수정할 수도 있습니다. 그러면 일부가 원래 URL과 다른 새 URL이 생성되고 브라우저가 이를 로드하여 표시합니다. 예를 들어 Location 객체의 hash 속성을 설정하면 브라우저는 현재 문서의 지정된 위치로 이동합니다. 마찬가지로, 검색 속성이 설정되면 브라우저는 새 쿼리 문자열이 추가된 URL을 다시 로드합니다.

4. URL 속성 외에도 Location 개체의 reload() 메서드는 현재 문서를 다시 로드할 수 있으며, replacement()는 새 기록 레코드를 만들지 않고도 새 문서를 로드할 수 있습니다. 브라우저의 기록 목록에서 새 문서가 현재 문서를 대체합니다.

2. JS의 위치 속성

속성 설명
hash 파운드 기호(#)로 시작하는 URL(앵커)을 설정하거나 반환합니다. 주소에 "#"이 없으면 빈 문자열이 반환됩니다.
호스트는 현재 URL의 호스트 이름과 포트 번호를 설정하거나 반환합니다.
호스트 이름은 현재 URL의 호스트 이름을 설정하거나 반환합니다.
href는 전체 URL을 설정하거나 반환합니다. 브라우저의 주소 표시줄에 표시하는 방법이 반환됩니다.
pathname은 현재 URL의 경로 부분을 설정하거나 반환합니다.
port 현재 URL의 포트 번호를 설정하거나 반환합니다.
프로토콜은 현재 URL의 프로토콜을 설정하거나 반환하며 값은 'http:', 'https:', 'file:' 등입니다.
검색은 물음표(?)로 시작하는 URL(쿼리 부분)을 설정하거나 반환합니다.

3. JS의 위치 객체 메소드

속성 설명
할당()은 새 문서를 로드합니다.
reload()는 현재 문서를 다시 로드합니다. 이는 브라우저에서 "새로 고침"(IE) 또는 "다시 로드"(Netscape) 키를 누르는 것과 같습니다.
replacement()는 현재 문서를 새 문서로 대체합니다. 이는 브라우저에서 "새로 고침"(IE) 또는 "다시 로드" 키를 누르는 것과 같습니다.

4. JS의 위치 인스턴스

//简单跳转

function gotoPage(url) { 

var url ="url?catalogid="+catalogID; 

window.location =url; 

}

//为单个页面传递参数

function goto_catalog(iCat) { 

if(iCat<=0) { 

top.location = "url";

} else { 

window.location ="url&#63;catid="+iCat; 

}

}

// 对指定框架进行跳转页面

function goto_iframe(url) { 

parent.mainFrame.location ="url"; 

}

위 내용은 이 글의 전체 내용입니다. 모두 마음에 드셨으면 좋겠습니다.