JS 의 BOM 애플 리 케 이 션

6747 단어 jsbom활용 단어 참조
JS 는 세 부분 으로 구성 되 어 있 으 며,그 중 하 나 는 BOM 으로 브 라 우 저 를 조작 하 는 데 사용 된다 고 말 한 적 이 있 습 니 다.이번 시간 에 우 리 는 주로 BOM 을 소개 하 러 왔 다.
BOM 기초
먼저 BOM 의 가장 기본 적 인 기능 을 살 펴 보 겠 습 니 다.창 을 열 고 닫 습 니 다.

<html>
 <head>
  <meta charset="utf-8">
  <title>     </title>
 </head>
 <body>
  <input type="button" value="    " onclick="window.open('http://www.zhinengshe.com/');" />
 </body></html>
open 방법 은 창 을 여 는 데 사 용 됩 니 다.상대 적 으로 close 방법 은 창 을 닫 는 데 사 용 됩 니 다.여기 서 우 리 는 오픈 방법 으로 실행 코드 를 실현 할 수 있다.
그 전에 document.write 에 관 한 작은 지식 을 보충 해 드 리 겠 습 니 다.

<!DOCTYPE HTML><html>
 <head>
  <meta charset="utf-8">
  <title>     </title>
 </head>
 <body>
  <input type="button" value="write" onclick="document.write('abc')" />
 </body></html>
원본 코드 를 열 면 우리 가 단 추 를 누 르 면 전체 페이지 의 원본 코드 는'abc'만 남 았 다.즉,document.write 가 이벤트 에 넣 어 사용 하면 페이지 를 완전히 비우 고 다시 쓰 는 것 이다.
우리 의 실행 코드 사례 를 볼 수 있 습 니 다.document.write 방법 을 사용 하 는 것 이 매우 적합 합 니 다.

<html>
 <head>
  <meta charset="utf-8">
  <title>     </title>
  <script>
  window.onload=function ()
  {
   var oTxt=document.getElementById('txt1');
   var oBtn=document.getElementById('btn1');
  
   oBtn.onclick=function ()
   {
    var oNewWin=window.open('about:blank', '_blank');
  
    oNewWin.document.write(oTxt.value);
   };
  };
  </script>
 </head>
 <body>
  <textarea id="txt1" rows="10" cols="40"></textarea><br>
  <input id="btn1" type="button" value="  " />
 </body></html>
그 중blank 는 창 을 새로 여 는 것 을 의미 합 니 다.(이 창 에서 열기 용self),about:blank 대 표 는 빈 창 을 연 다음 document.write 를 사용 하여 새 창 에 html 를 쓰 면 새 창 에서 html 코드 를 실행 할 수 있 습 니 다.
open 을 말 한 후에 우 리 는 close 의 몇 가지 문 제 를 말 합 니 다.close 의 사용 은 매우 간단 합 니 다.window.close 를 사용 하면 창 을 닫 는 이 벤트 를 실행 할 수 있 습 니 다.그러나 불 여우 브 라 우 저 에 서 는 한 사용자 가 열 수 있 는 창 을 닫 을 수 없습니다.하나의 창 이 open 방법 으로 열 렸 을 때 만 close 방법 으로 닫 을 수 있 습 니 다.
open 과 close 방법 을 말 한 후에 우 리 는 두 가지 자주 사용 하 는 속성 을 말 합 니 다.window.nevigator.userAgent 와 window.location.전 자 는 현재 브 라 우 저의 버 전 정 보 를 얻 는 역할 을 합 니 다.후 자 는 현재 웹 페이지 의 주 소 를 얻 는 역할 을 합 니 다.
사이즈 및 좌표
여기 서 JS 의 사이즈 와 좌표 에 관 한 내용 을 토론 합 시다.
먼저 언급 해 야 할 것 은 시각 영역 사이즈 에 관 한 지식 이다.시각 영역 사 이 즈 는 무엇 입 니까?사실은 사용자 측 이 화면 에서 웹 페이지 부분의 사 이 즈 를 볼 수 있다 는 것 이다.시각 구역 의 사 이 즈 는 창의 크기 에 따라 달라 집 니 다.document.documentElement.clientWidth document.documentElement.clientHeight을 통 해 현재 페이지 시각 구역 의 너비 와 높이 를 얻 을 수 있 습 니 다.

<html>
 <head>
  <meta charset="utf-8">
  <title>     </title>
  <script>
  window.onload=function ()
  {
   var oBtn=document.getElementById('btn1');
   oBtn.onclick=function ()
   {
    alert(' :'+document.documentElement.clientWidth+' :'+document.documentElement.clientHeight);
   };
  };
  </script>
 </head>
 <body>
  <input id="btn1" type="button" value="     " />
 </body></html>
효 과 는 다음 과 같 습 니 다:

또한 시각 영역 에 대해 서 는 스크롤 탑,즉 스크롤 거리 또는 시각 영역 에서 페이지 상단 까지 의 거리 라 는 속성 도 있 습 니 다.

<!DOCTYPE HTML><html>
 <head>
 <meta charset="utf-8">
 <title>     </title>
 <script>
 document.onclick=function ()
 {
  //IE、FF
  //alert(document.documentElement.scrollTop);
 
  //chrome
  //alert(document.body.scrollTop);
 
  var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
 
  alert(scrollTop);
 };
 </script>
 </head>
 <body style="height:2000px;">
 </body></html>
효 과 는 다음 과 같 습 니 다:
//여기 그림 이 있어 요.
주의해 야 할 것 은document.documentElement.scrollTopi 에서 만 호 환 되 고 chrome 에서 의 쓰기 법칙 은document.body.scrollTop이기 때문에 우 리 는||방법 으로 호 환 문 제 를 처리 합 니 다.
상용 방법 과 이벤트
여기 서 우 리 는 fixed 를 제외 한 다른 방법 으로 요소 의 고정 포 지 셔 닝 을 실현 하려 고 시도 합 니 다(fixed 는 ie6 에서 호 환 되 지 않 습 니 다).
여기에 우 리 는 그림 을 한 장 더 그린다.

우리 가 검 은 선의 길 이 를 계산 하면 오른쪽 아래 의 div 블록 을 고정 적 으로 포 지 셔 닝 할 수 있 음 을 알 수 있다.검 은 선의 길 이 는 시각 적 높이 에서 div 블록 을 뺀 offset Height 와 같다.

<html>
 <head>
  <meta charset="utf-8">
  <title>     </title>
  <style>
  #div1 {width:200px; height:150px; background:red; position:absolute; right:0; bottom:0;}
  body {height:2000px;}
  </style>
  <script>
  window.onscroll=function ()
  {
   var scrollTop=document.documentElement.scrollTop||document.body.scrollTop;
   var oDiv=document.getElementById('div1');  oDiv.style.top=document.documentElement.clientHeight-oDiv.offsetHeight+scrollTop+'px';
  };
  </script>
 </head>
 <body>
 <div id="div1"></div>
 </body></html>
효 과 는 다음 과 같 습 니 다:

우리 의 div 블록 이 약간 떨 리 는 것 을 볼 수 있 습 니 다.onscroll 함수 가 계속 발생 하고 있 기 때문에 발생 할 때마다 한 번 씩 호출 되 기 때문에 이런 상황 이 발생 할 수 있 습 니 다.그 밖 에 더 심각 한 상황 도 존재 한다.만약 에 우리 가 창 크기 를 바 꾸 면 div 블록 은 따라 가지 않 고 제자리 에 있 기 때문에 우 리 는 또 다른 사건 을 사용 해 야 한다.
window.onresize(페이지 크기 가 바 뀌 었 을 때 발생 하 는 이벤트:):

window.onscroll=window.onresize=function (){...}
마지막 으로 자주 사용 하 는 시스템 대화 상 자 를 말씀 드 리 겠 습 니 다.
  • alert("내용")경고 상자,반환 값 이 없습니다.
  • confirm("질문 의 내용")선택 상 자 는 확인 또는 취소 옵션 을 주 고 boolean 을 되 돌려 줍 니 다.
  • prompt("알림 텍스트","기본 텍스트")는 입력 가능 한 텍스트 상 자 를 팝 업 합 니 다.입력 한 텍스트 내용(문자열)을 되 돌려 주 고 입력 하지 않 으 면 null
    • 입 니 다.
    총결산
    위 에서 말씀 드 린 것 은 편집장 님 께 서 소개 해 주신 JS 의 BOM 앱 입 니 다.여러분 께 도움 이 되 셨 으 면 좋 겠 습 니 다.궁금 한 점 이 있 으 시 면 댓 글로 남 겨 주세요.편집장 님 께 서 바로 답 해 드 리 겠 습 니 다.여기 서도 저희 사이트 에 대한 여러분 의 지지 에 감 사 드 립 니 다!
    위 챗 애플 릿 구현 목록 드 롭 다운 새로 고침 업 로드
    위 챗 애플 릿 이 문자 주마등 효 과 를 실현 하 다.

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage