본문으로 건너뛰기
黯羽轻扬매일 조금씩

JS 학습노트 4_BOM

무료2015-04-08#JS#bom

본고에서는 각종 내장 BOM 객체 및 클라이언트 감지 관련 상식을 소개한다

##1.frame 관련 객체##

  • top:최외각 프레임 을 가리킵니다.top 을 사용하면 한 프레임에서 다른 프레임에 액세스할 수 있습니다.예를 들어 top.frames[index/name]

  • parent:현재 프레임의 직접 상위 프레임을 가리킵니다

  • window:코드가 존재하는 프레임의 특정 인스턴스입니다.따라서 window 객체는 유일하지 않으며,각 프레임은 각각의 window 객체를 가집니다

  • self:window 를 가리킵니다.둘은 상호 교환 가능합니다

##2.윈도우,페이지 관련##

###1.윈도우의 화면 왼쪽 경계 및 위쪽 경계로부터의 위치 가져오기###

var x = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;//FF 는 후자만 지원
var y = (typeof window.screenLeft === 'number') ? window.screenLeft : window.screenX;
alert(x + ', ' + y);///

브라우저에 따른 윈도우 위치 이해는 다르며,브라우저 윈도우를 최대화했을 때 위 코드의 출력 결과는:

  • Chrome:(0, 0)

  • IE8:(0, 0)

  • FF:(-4, -4)

Safari 와 Opera 는 알 수 없습니다.브라우저 벤처의차이점은 윈도우 위치가 브라우저 윈도우의 위치인지,페이지 컨테이너 (viewport) 의 위치인지에 있습니다

###2.페이지 뷰포트 (viewport) 크기 가져오기###

var pageWidth = window.innerWidth;
var pageHeight = window.innerHeight;

if(typeof pageWidth !== 'number'){
  if(document.compatMode == 'CSS1Compat'){
    pageWidth = document.documentElement.clientWidth;
    pageHeight = document.documentElement.clientHeight;
  }
  else{
    pageWidth = document.body.clientWidth;
    pageHeight = document.body.clientHeight;
  }
}
alert(pageWidth + ', ' + pageHeight);///

뷰포트 (viewport) 란 페이지의 가시 영역을 가리키며,즉 브라우저가 페이지에 제공하는 컨테이너입니다.브라우저 윈도우를 최대화했을 때 위 코드의 출력 결과는: (해상도 1366*768)

  • Chrome:(1366, 653)

  • IE8:(1362, 644)

  • FF:(1366, 667)

PC 단 브라우저는 이 점에서 합의했지만,모바일 브라우저에는 차이가 있습니다.모바일 단 브라우저를 지원해야 하는 경우,각 브라우저의 지원 상황을 자세히 연구해야 합니다.여기서는 자세히 설명하지 않습니다

###3.새 윈도우를 여는 방법###

//window.open(url, target, strOptions, replaceOrNot);//<a href="http://ayqy.net/" target="_self"></a>와 동치.target 값은 frameName 도 될 수 있으며,지정된 frame 에서 페이지를 여는 것을 나타냄
//window.open('http://ayqy.net/', '_self');//현재 페이지에서 엽니다.뒤로 가기 버튼이 무효화됨
//var win = window.open('http://ayqy.net/', '_blank', 'width=200, height=200');//200*200 의 윈도우를 팝업
//setTimeout(win.close(), 3000);//3 초 후 자동 닫힘
//window.open('http://ayqy.net/', '_self', '', true);//현재 기록을 대체.흔적 없이 점프

P.S.윈도우 방식으로 콘텐츠를 표시하는 것은SEO 에 불리합니다.가장 일반적인 팝업 윈도우는 광고나 제 3 자 계정 로그인이며,이들은 SEO 가 필요 없는 곳입니다

##3.타임아웃 호출##

setTimeout(strCode/funcName, timeout);는 timeout 밀리초 후에 code 가반드시 실행된다는 보장은 없음을 나타냅니다.왜냐하면 이 함수의 정확한 의미는:timeout 밀리초 후에 지정된 작업을 작업 큐에 추가하는 것이기 때문입니다

미실행 지연 작업 취소:

var timeoutId = setTimeout(strCode/fun, timeout);
clearTimeout(timeoutId);

P.S.setTimeout 의 첫 번째 매개변수는 문자열일 수 있지만,함수 이름을 사용하는 것을 권장합니다.문자열은 js 코드로 파싱된 후 실행되어야 하므로,성능 손실이 존재합니다

##4.간격 호출##

setInterval(strCode/fun, timeout);는 지정된 시간 간격으로 작업을 작업 큐에 삽입하는 것을 나타냅니다

주의:새 작업을 삽입할 준비가 되었을 때,이전 삽입 작업이 아직 완료되지 않은 경우,이번 삽입은 자동으로 취소됩니다.즉,작업 큐 내에 같은 작업이 없으면 삽입하고,그렇지 않으면 다음을 기다립니다

미실행 간격 작업 취소:타임아웃 호출과 동일하게,clearInterval(intervalId);

주의:간격 호출 사용은 권장되지 않습니다.후속 간격 호출이 이전 종료 전에 시작될 수 있기 때문입니다.일반적으로재귀적 타임아웃 호출로 시뮬레이션 합니다.예를 들어:

(function(){
  alert('x');
  setTimeout(arguments.callee, 3000);//함수 이름을 사용하지 않도록 주의.arguments.callee 를 사용하는 것이 더 안전.함수 이름이 외부에서 변경되는 것을 두려워하지 않으므로
})();//익명 함수를 즉시 실행

##5.다이얼로그##

  • alert(msg):경고 상자.오류 정보 표시에 사용.확인 버튼만 있음

  • confirm(msg):확인 상자.삭제 등 중요한 작업 확인에 사용.확인/취소 버튼이 있으며,true/false 를 반환

  • prompt(msg, hint):입력 상자.사용자 입력 획득에 사용.확인/취소 버튼이 있으며,입력 값/null 을 반환

  • windowprint(), windowfind():인쇄/찾기.용도가 적음

##6.location 객체##

###1.url 가져오기###

  • location.href:현재 페이지의 완전한 url 을 가져옴.예를 들어"http://www.ayqy.net"

  • location.search:쿼리 문���열을 가져옴.예를 들어"?keyword=do"

  • location.hash:앵커 (# 및 뒤의 값.UNIX 에서는#를 hash 라고 부르기 때문에 hash 라고 함) 를 가져옴.예를 들어"#menu"

  • location.host:호스트명과 포트 번호를 가져옴.예를 들어"www.ayqy.net:80"

  • location.hostname:호스트명을 가져옴.예를 들어"www.ayqy.net"

  • location.pathname:url 중의 디렉토리 또는 파일명을 가져옴.예를 들어"/film/"

  • location.port:포트 번호를 가져옴.예를 들어"80"

  • location.protocol:페이지가 사용하는 프로토콜을 반환.예를 들어"https:"

###2.점프,리디렉션###

  • location.assign(url);

  • location.href = url;//가장 일반적

  • window.location = url;

  • location.replace(url);//점프하고 돌아갈 수 없음

  • location.reload(true/false):현재 페이지를 다시 로드.true 인 경우 캐시에서 가져오지 않음

##7.navigator 객체 (브라우저 관련 파라미터 감지에 사용)##

플러그인 감지와 등록 핸들러 처리 등의 기능을 제공합니다.등록 핸들러는 현재 페이지가 어떤 온라인 기능 (예를 들어 온라인 이메일,RSS 리더 등) 을 제공하는 것을 브라우저에 알리는 것에 해당합니다.등록 후 사용자가 특정 작업 (예를 들어 RSS 소스 페이지 액세스) 을 실행하면,자동으로 등록済み 페이지를 요청합니다.데스크톱 애플리케이션의 기본 열기 방식 설정에 해당합니다

##8.screen 객체##

클라이언트 관련 정보 획득에 사용합니다.예를 들어 화면의 너비와 높이,사용 가능한 너비와 높이 등.용도는 많지 않으며,브라우저 지원성도 좋지 않습니다

##9.history 객체##

  • history.go(delta);또는 history.go(str);앞/뒤로 점프,또는 url 에 str 을 포함하는 최신 페이지로 점프 (앞 또는 뒤)

  • history.back();history.forward();브라우저의 뒤로/앞으로 버튼을 시뮬레이트

  • history.length;기록 레코드 수를 가져옴.0 인 경우 현재 페이지가 사용자가 브라우저를 연 후 액세스한 첫 페이지임을 나타냄

주의:기록 내에서 점프할 수 있지만,기록 URL 은 얻을 수 없습니다 (보안 제한)

P.S.HTML5 는 history.pushState/history.replaceState 함수를 제공합니다.pushState + Ajax 를 결합하여PJax기술이라고 부르는 사람이 있습니다.페이지 내 업데이트의 점프 없는 web App 구현에 사용되지만,pushState 에는 호환성 문제가 있어 다른 지원 컴포넌트를 도입해야 합니다

##10.클라이언트 감지 기술##

  1. 기능 감지 (특성 감지):코드를 작성하기 전에 사용자 브라우저의 능력을 감지하여,다른 방식으로 목적을 실현합니다.예를 들어:

     if(typeof String.startsWith === 'function'){...}

  2. 기벽 감지:특정 브라우저가 특정 코드를 실행할 때 불합리한 결과가 발생합니다.어떤 기벽이 스크립트 실행을 방해하는 경우에만 사용합니다 (여기서의 기벽은 실제로는 브라우저 구현의 js 버그를 가리킵니다.예를 들어 열거해서는 안 되는 속성이 열거 가능하는 등.기벽은 비교적 드뭅니다)

  3. 사용자 에이전트 감지:UA 문자열을 감지함으로써 사용자 브라우저의 구체적인 정보를 식별하지만,UA 에는 기만성이 있습니다

P.S.클라이언트 감지 기술을 사용해야 하는 경우,우선 순위는 위와 같습니다.먼저 기능 감지를 수행하고,안 되면 기벽 감지,UA 감지는 최하책 입니다.UA 감지는 특정 모델의 브라우저를 대상으로 하며,브라우저의 패치가 기존 방안을 무효화할 수 있기 때문입니다

댓글

아직 댓글이 없습니다

댓글 작성