집 >웹 프론트엔드 >JS 튜토리얼 >JavaScript 브라우저 개체 샘플 코드에 대한 자세한 설명

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

怪我咯원래의: 2017-07-07 15:11:171153검색

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

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

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

호환성: IE12ec00e516aaf3997c46a2468a9d6af7xxx6e916e0f7d1e588d4f442bf645aedb2f에서 읽혀지지만 동적으로 변경될 수 있습니다.

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명：

이전 기사：JavaScript 타이핑 게임 코드 예다음 기사：JavaScript 타이핑 게임 코드 예