JavaScript 브 라 우 저 대상 모델 BOM 원리 와 일반적인 용법 인 스 턴 스 분석

4281 단어 JavaScriptBOM
이 사례 는 자 바스 크 립 트 브 라 우 저 대상 모델 인 BOM 원리 와 일반적인 용법 을 설명 한다.여러분 께 참고 하도록 공유 하 겠 습 니 다.구체 적 으로 는 다음 과 같 습 니 다.
BOM 이 뭐야?
BOM:브 라 우 저 개체 모델,브 라 우 저 개체 모델

위의 그림 에서 도 알 수 있다.
  • window 대상 은 BOM 의 꼭대기 층(핵심)대상 으로 모든 대상 이 이 를 통 해 뻗 어 나 와 window 의 하위 대상 이 라 고도 할 수 있다.
  • DOM 은 BOM 의 일부분 이다.
    • window 개체:
  • window 대상 은 JavaScript 의 최상 위 대상 입 니 다.
  • 전역 변수,사용자 정의 함수 도 window 대상 의 속성 과 방법 입 니 다.
  • window 대상 의 속성 과 방법 을 호출 할 때 window 를 생략 할 수 있 습 니 다.
    • 팝 업 시스템 대화 상자
    예 를 들 어 alert(1)는 window.alert(1)의 약자 로 window 의 하위 방법 이기 때문이다.
    시스템 대화 상 자 는 세 가지 가 있 습 니 다:
    
alert(); //              
confirm(); //    
prompt(); //
    창 열기,창 닫 기
    창 을 열다
    
window.open(url,target)
    매개 변수 설명:
  • url:열 주소 입 니 다.
  • target:새 창의 위치 입 니 다.가능:blank 、_self、 _parent 부모 프레임 워 크.
    • 
<!DOCTYPE html>
<html>
 <head>
  <meta charset="UTF-8">
  <title></title>
 </head>
 <body>
  <!--   js  open() window    -->
  <button onclick="window.open('https://www.luffycity.com/')">    </button>
  <button>    </button>
  <button onclick="window.close()">  </button>
  <button>  </button>
 </body>
 <script type="text/javascript">
  var oBtn = document.getElementsByTagName('button')[1];
  var closeBtn = document.getElementsByTagName('button')[3];
  oBtn.onclick = function(){
      //open('https://www.baidu.com')
   //      
   open('about:blank',"_self")
  }
  closeBtn.onclick = function(){
   if(confirm("    ？")){
    close();
   }
  }
 </script>
</html>
    
<body>
<!--BOM    window.     -->
<!--history    hash  -->
<!--history  ： xxxx/#/index.html-->
<!--hash  ：xxxx/index.html-->
<button id="btn">  </button>
<script>
 var oBtn=document.getElementById('btn');
 oBtn.onclick=function(){
  console.log(location);
  //    ，        
  // location.href='http://www.baidu.com';
  // open('http://www.baidu.com','_self');
  window.open('http://www.baidu.com','_self');//       
  window.location.reload();//       
 }
</script>
</body>
    위치 개체
    window.location 는 location 로 간략하게 쓸 수 있 습 니 다.location 는 브 라 우 저 주소 표시 줄 에 해당 하 며 url 을 독립 된 세 션 으로 해석 할 수 있 습 니 다.
    location 대상 의 속성
  • href:점프
  • hash url 로 돌아 가기\#뒤의 내용,포함\#
  • 호스트 호스트 이름,포트
    • 포함
    호스트 이름
  • pathname url 의 경로 부분
  • protocol 프로 토 콜 은 일반적으로 http,https
    • 입 니 다.
  • search 검색 문자열
    • 예:5 초 후 자동 으로 바 이 두 로 이동 합 니 다.
    때때로 우리 가 존재 하지 않 는 웹 페이지 를 방문 할 때 5 초 후에 자동 으로 지정 한 페이지 로 이동 하 는 것 을 알려 줍 니 다.이때 location 을 사용 할 수 있 습 니 다.
    
<script>
 setTimeout(function () {
  location.href = "http://www.baidu.com";
 }, 5000);
</script>
    location.reload():다시 불 러 옵 니 다.이 불 러 오 는 것 은?  전역 새로 고침,전체 문 서 를 다시 한 번 해석 하 였 습 니 다.일반적으로 사용 을 권장 하지 않 습 니 다.
    
setTimeout(function(){
   //3          
 window.location.reload();  
},3000)
    navigator 개체
    window.navigator 의 일부 속성 은 클 라 이언 트 의 정 보 를 얻 을 수 있 습 니 다.
  • userAgent:시스템,브 라 우 저)
  • platform:브 라 우 저가 지원 하 는 시스템,win/mac/linux 
    • 
console.log(navigator.userAgent);
console.log(navigator.platform);
    관심 있 는 친 구 는 온라인 HTML/CSS/JavaScript 코드 실행 도 구 를 사용 할 수 있 습 니 다.http://tools.jb51.net/code/HtmlJsRun 에서 상기 코드 실행 효 과 를 테스트 할 수 있 습 니 다.
    자 바스 크 립 트 관련 내용 에 관심 이 있 는 독자 들 은 본 사이트 의 주 제 를 볼 수 있다.
    본 고 에서 말 한 것 이 여러분 의 자 바스 크 립 트 프로 그래 밍 에 도움 이 되 기 를 바 랍 니 다.
    js DOM 의 이벤트 흔 한 조작 실례 상세 설명
    js 디지털 스크롤 효과 구현

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

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