JavaScript 브라우저 개체 샘플 코드에 대한 자세한 설명-JS 튜토리얼-php.cn

JavaScript 브라우저 개체 샘플 코드에 대한 자세한 설명

怪我咯

풀어 주다： 2017-07-07 15:11:17

원래의

1181명이 탐색했습니다.

JavaScript는 브라우저에서 제공하는 많은 개체를 가져와 작업을 수행할 수 있습니다. 이 기사에서는 JavaScript의 브라우저 개체에 대한 지식을 소개합니다. JavaScript는 브라우저에서 제공하는 많은 개체를 얻고 이를 작동할 수 있습니다.

window창 개체는 전역 범위 역할을 할 뿐만 아니라 브라우저 창을 나타냅니다.

창 개체에는 브라우저 창의 내부 너비와 높이를 가져올 수 있는 innerWidth 및 innerHeight 속성이 있습니다. 내부 너비와 높이는 메뉴 표시줄, 도구 모음, 테두리와 같은 자리 표시자 요소를 제거한 후 웹 페이지를 표시하는 데 사용되는 순 너비와 높이를 나타냅니다.

호환성: IE<=8은 지원되지 않습니다.

// 可以调整浏览器窗口大小试试:
alert(&#39;window inner size: &#39; + window.innerWidth + &#39; x &#39; + window.innerHeight);

로그인 후 복사

그에 따라 브라우저 창의 전체 너비와 높이를 얻을 수 있는 externalWidth 및 externalHeight 속성도 있습니다.

navigator

navigator object

는 브라우저 정보를 나타냅니다. gator.app 버전: 브라우저 버전;

lnavigator.언어: 브라우저에서 설정한 언어

lnavigator.platform: 운영 체제 유형
oznavigator.userAgent: 브라우저 문자열에 의해 설정된 사용자 에이전트 .
```
alert(&#39;appName = &#39; + navigator.appName + &#39;\n&#39; +
   &#39;appVersion = &#39; + navigator.appVersion + &#39;\n&#39; +
   &#39;language = &#39; + navigator.language + &#39;\n&#39; +
   &#39;platform = &#39; + navigator.platform + &#39;\n&#39; +
   &#39;userAgent = &#39; + navigator.userAgent);
```
로그인 후 복사
네비게이터의 정보는 사용자가 쉽게 수정할 수 있으므로 JavaScript로 읽은 값이 반드시 정확하지는 않다는 점을 참고하세요. 브라우저마다 다른 코드를 작성하기 위해 많은 초보자는 다음과 같이 브라우저 버전을 확인하기 위해 if를 사용하는 것을 좋아합니다.

var width;
if (getIEVersion(navigator.userAgent) < 9) {
  width = document.body.clientWidth;
} else {
  width = window.innerWidth;
}

로그인 후 복사

그러나 이는 판단을 부정확하게 만들 뿐만 아니라 코드를 유지하기 어렵게 만들 수도 있습니다. 올바른 방법은 존재하지 않는 속성에 대해 정의되지 않음을 반환하는 JavaScript 기능을 최대한 활용하고 단락 연산자 ||를 직접 사용하여 계산하는 것입니다.
```
var width = window.innerWidth || document.body.clientWidth;
```
로그인 후 복사
screen

screen object

일반적으로 사용되는 속성은 다음과 같습니다.

longscreen.width: 화면 너비(픽셀 단위)

lmscreen.height: 화면 높이(픽셀 단위) 8, 16, 24와 같은 색상 비트입니다.

alert(&#39;Screen size = &#39; + screen.width + &#39; x &#39; + screen.height);

로그인 후 복사

location
location object
는 현재 페이지의 URL 정보를 나타냅니다. 예를 들어 전체 URL:
http://www.example.com:8080/path/index.html?a=1&b=2#TOP
은 location.href를 사용하여 얻을 수 있습니다. URL의 각 부분의 값을 얻으려면 다음과 같이 작성할 수 있습니다.

location.protocol; // &#39;http&#39;
location.host; // &#39;www.example.com&#39;
location.port; // &#39;8080&#39;
location.pathname; // &#39;/path/index.html&#39;
location.search; // &#39;?a=1&b=2&#39;
location.hash; // &#39;TOP&#39;

로그인 후 복사

새 페이지를 로드하려면 위치.할당()을 호출할 수 있습니다. 현재 페이지를 다시 로드하려면 location.reload() 메서드를 호출하는 것이 매우 편리합니다.

if (confirm(&#39;重新加载当前页&#39; + location.href + &#39;?&#39;)) {
  location.reload();
} else {
  location.assign(&#39;/discuss&#39;); // 设置一个新的URL地址
}

로그인 후 복사

document

문서 개체는 현재 페이지를 나타냅니다. HTML은 브라우저에서 DOM 형태의 트리 구조로 표현되므로 문서 객체는 전체 DOM 트리의 루트 노드입니다.

문서의 제목 속성은 HTML 문서의 xxx에서 읽혀지지만 동적으로 변경될 수 있습니다.

document.title = &#39;努力学习JavaScript!&#39;;

로그인 후 복사

브라우저 창 제목의 변경을 관찰하세요.

DOM 트리에서 노드를 찾으려면 문서 개체에서 검색을 시작해야 합니다. 가장 일반적으로 사용되는 검색은 ID와 태그 이름을 기반으로 합니다.

먼저 HTML 데이터를 준비합니다.

<dl id="drink-menu" style="border:solid 1px #ccc;padding:6px;">
  <dt>摩卡</dt>
  <dd>热摩卡咖啡</dd>
  <dt>酸奶</dt>
  <dd>北京老酸奶</dd>
  <dt>果汁</dt>
  <dd>鲜榨苹果汁</dd>
</dl>

로그인 후 복사

문서 개체에서 제공하는 getElementById() 및 getElementsByTagName

()을 사용하여 ID로 DOM 노드를 가져오고 태그 이름으로 DOM 노드 그룹을 가져옵니다.

var menu = document.getElementById(&#39;drink-menu&#39;);
var drinks = document.getElementsByTagName(&#39;dt&#39;);
var i, s, menu, drinks;

menu = document.getElementById(&#39;drink-menu&#39;);
menu.tagName; // &#39;DL&#39;

drinks = document.getElementsByTagName(&#39;dt&#39;);
s = &#39;提供的饮料有:&#39;;
for (i=0; i<drinks.length; i++) {
  s = s + drinks[i].innerHTML + &#39;,&#39;;
}
alert(s);

로그인 후 복사

Mocha

핫 모카 커피

요구르트

베이징 올드 요거트
주스

갓 짜낸 사과 주스

문서 객체에는 현재 페이지의 쿠키를 가져올 수 있는 쿠키 속성도 있습니다.

쿠키는 서버에서 보낸 키-값 식별자입니다. HTTP 프로토콜은 상태 비저장(stateless)이기 때문에 서버가 요청을 보낸 사용자를 구별하려는 경우 쿠키를 사용하여 구별할 수 있습니다. 사용자가 성공적으로 로그인하면 서버는 user=ABC123XYZ(암호화된 문자열)과 같은 쿠키를 브라우저에 보냅니다. 그 후 브라우저가 웹사이트를 방문할 때 이 쿠키를 요청 헤더에 첨부하고 서버는 쿠키를 기반으로 사용자를 식별할 수 있습니다.

쿠키는 페이지에 표시되는 언어 등 웹사이트의 일부 설정을 저장할 수도 있습니다.

JavaScript는 document.cookie를 통해 현재 페이지의 쿠키를 읽을 수 있습니다.

document.cookie; // &#39;v=123; remember=true; prefer=zh&#39;

로그인 후 복사

JavaScript는 페이지의 쿠키를 읽을 수 있고 일반적으로 사용자의 로그인 정보도 쿠키에 저장되므로 이로 인해 엄청난 보안 위험이 발생합니다. HTML 페이지에 제3자 JavaScript 코드를 도입하는 것이 허용되기 때문입니다:

<!-- 当前页面在wwwexample.com -->
<html>
  <head>
    <script src="http://www.foo.com/jquery.js"></script>
  </head>
  ...
</html>

로그인 후 복사

도입된 제3자 JavaScript에 악성 코드가 있는 경우 www.foo.com 웹사이트는 www.example.com 웹사이트를 직접 획득합니다
사용자 로그인
정보.

이 문제를 해결하기 위해 서버는 쿠키를 설정할 때 httpOnly를 사용할 수 있습니다. httpOnly로 설정된 쿠키는 JavaScript에서 읽혀지지 않습니다. 이 동작은 브라우저에 의해 구현됩니다. 모든 주류 브라우저는 httpOnly 옵션을 지원하며 IE는 IE6 SP1부터 이를 지원합니다.

보안을 보장하기 위해 서버는 쿠키를 설정할 때 항상 httpOnly 사용을 고집해야 합니다.

history

history 객체는 브라우저의 기록을 저장합니다. JavaScript는 기록 객체의 back() 또는 forward()를 호출할 수 있습니다. 이는 사용자가 브라우저에서 "뒤로" 또는 "앞으로"를 클릭하는 것과 같습니다. 브라우저 버튼.

이 개체는 역사적인 레거시 개체입니다. AJAX와 페이지 상호 작용의 광범위한 사용으로 인해 간단하고 무례하게 History.back()을 호출하면 사용자가 매우 화를 낼 수 있습니다.

초보자가 웹 페이지 디자인을 시작할 때, 로그인 페이지에 성공적으로 로그인되면 기록.back()을 호출하여 로그인 전 페이지로 돌아가려고 합니다. 이것은 잘못된 접근 방식입니다.

어떤 상황에서도 기록 개체를 사용해서는 안 됩니다.

위 내용은 JavaScript 브라우저 개체 샘플 코드에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!