ProgramingTip

document.location.href와 document.location의 차이점은 무엇입니까?

bestdevel 2021. 1. 6. 20:52
반응형

document.location.href와 document.location의 차이점은 무엇입니까?


document.location.href의 차이점은 document.location무엇입니까?

브라우저간에 동일합니까?


document.locationwindow.locationJavaScript가 거의 사용되지 않는 동의어입니다 . 그것을 사용하지 않습니다.

locationURL의 일부에 해당하는 속성을 가진 구조화 된 개체입니다. location.href단일 세계의 전체 URL입니다. 둘 중 하나에 할당하면 할당하면 동일한 종류의 탐색이 발생하도록 정의하십시오.

나는 location.href = something약간 더 명확하기 때문에 약간 더 나은 글을 쓰는 것을 고려 합니다. 일반적으로 location = something변수 할당처럼 오해의 소지가있는 것처럼 보이는 것을 피하고 싶습니다. window.location = something그래도 괜찮습니다.


document.location현재 위치에 대한 속성을 포함하는입니다.

href속성은 다른 모든 속성을 합친 전체 URL, 예를 들어, 속성 중 하나입니다.

브라우저에서는 일부 locationobject-에 URL 할당 할 수을 있으며 마치 href속성에 할당 한 것처럼 작동 합니다. 일부 다른 브라우저는 더 까다 롭고 href속성 을 사용합니다 . 대부분의 브라우저에서 코드가 작동하는 광고 href속성 을 사용합니다 .

windowdocument개체 모두 개체가 location있습니다. 당신이 중 하나를 사용하여 URL 설정할 수 있습니다을 window.location.href또는 document.location.href. 논리적으로 그러나 document.locationobject-는 읽기 전용이어야합니다 (문서의 URL을 변경할 수 없기 때문에 URL을 변경하면 새 문서가로드 됨). 따라서 window.location.hrefURL을 설정하려는 경우 대신 사용하는 것이 안전 합니다. .


typeof document.location; // 'object'
typeof document.location.href; // 'string'

href동안 속성은 쿠키입니다 document.location자체가 개체입니다.


document.location은이고 document.location.href이고은입니다. 그러나 전자에는 방법이 toString있으므로 마치 공용 인 것처럼 해석 document.location.href됩니다.

일부 브라우저 (대부분의 최신 브라우저)에서는 document.location마치 슬롯 인 것처럼 할당 할 수도 있습니다 . 그러나 모질라 문서 에 따르면 원래 읽기 전용 window.location이므로이 용도로 사용하는 것이 더 document.location좋으므로 널리 지원되지 않을 수 있습니다.


document.location은 전역 개체이기 때문에 위치만으로 액세스 할 수있는 window.location 대신 사용하지 않습니다.

위치 개체에는 여러 속성과 메서드가 있습니다. location.href처럼 작동합니다.


현재 6 월 14 2013 ( HTML5 ), 유의 한 차이가있다

Browser : Chrome 27.X.X

참조 : document.location , window.location ( MDN )


document.location

type: Object

자체적으로 호출 된 함수는 사용 + 속성을 document.location반환합니다 .originpathname

URL 만 사용할 수 있습니다. 선택할 수 있습니다. 전용 document.URL속성을 사용할 수 있습니다.

ancestorOrigins: DOMStringList
assign: function () { [native code] }
hash: ""
host: "stackoverflow.com"
hostname: "stackoverflow.com"
href: "http://stackoverflow.com/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location?rq=1"
origin: "http://stackoverflow.com"
pathname: "/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location"
port: ""
protocol: "http:"
reload: function () { [native code] }
replace: function () { [native code] }
search: "?rq=1"
toString: function toString() { [native code] }
valueOf: function valueOf() { [native code] }

document.location.href

type: string

http://stackoverflow.com/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location?rq=1

다음은 차이의 고유 한 경우 어떻게 물릴 수 있는지에 대한 예입니다 (document.location은이고 document.location.href는 어디에 있습니까).

http://social.ClipFlair.net 에서 MonoX Social CMS ( http://mono-software.com ) 무료 버전을 사용 하고 일부 페이지에 언어 표시 줄 WebPart를 추가하여 지역화했지만 다른 페이지 (예 : 토론에서) 우리는 현지화를 사용하고 싶지 않았습니다. 그래서 우리는 모든 .aspx (ASP.net) 페이지에서 사용할 두 개의 마스터 페이지를 만들었습니다. 첫 번째 페이지에는 입력 도구 모음 WebPart가 있고 다른 하나에는 / lng / el-GR 등을 제거하는 다음 스크립트가 있습니다. URL을 입력하고 해당 페이지 대신 기본 (이 경우 영어) 언어를 표시합니다.

<script>
  var curAddr = document.location; //MISTAKE
  var newAddr = curAddr.replace(new RegExp("/lng/[a-z]{2}-[A-Z]{2}", "gi"), "");
  if (curAddr != newAddr)
    document.location = newAddr;
</script>

하지만이 코드는 작동하지 않습니다. replace 함수는 Undefined (예외 발생 없음)를 반환하므로 url x로 이동하는 대신 x / lng / el-GR / undefined라고 탐색하려고합니다. Mozilla Firefox의 디버거 (F12 키)로 확인하고 커서를 curAddr 변수 위로 이동하면 URL에 대한 간단한 문자열 값 대신 많은 정보가 표시됩니다. Watch 창에서 볼 수있는 팝업에서 Watch를 선택하면 URL에 "..."대신 "Location-> ..."이 표시되었습니다. 그게 물건이라는 걸 깨달았 어

하나는 교체가 예외 또는 무언가를 던질 것으로 예상했을 것이지만, 이제 문제는 URL 객체에서 존재하지 않는 "replace"메소드를 호출하려고 시도하는 것이 었습니다. 자바 스크립트.

이 경우 올바른 코드는 다음과 같습니다.

<script>
  var curAddr = document.location.href; //CORRECT
  var newAddr = curAddr.replace(new RegExp("/lng/[a-z]{2}-[A-Z]{2}", "gi"), "");
  if (curAddr != newAddr)
    document.location = newAddr;
</script>

참조 URL : https://stackoverflow.com/questions/2652816/what-is-the-difference-between-document-location-href-and-document-location

반응형