[ JavaScript ] 자바스크립트 기본 문법 | 창(window) 제어 | 팝업 차단

2021. 2. 7. 04:49·Archive/Develop
목차
  1.  
  2. 자바스크립트 기본 문법  ::  창(Window) 제어
  3. 자바스크립트 기본 문법  ::  창(Window) 간 상호작용
  4. 자바스크립트 기본 문법  ::  팝업 차단
728x90
반응형

이미지 출처 :   https://commons.wikimedia.org/wiki/File:JavaScript-logo.png


 

 

 

 

해당 포스팅은 생활코딩의 이고잉 님의 강의를 기반으로 개인 공부용으로 정리한 포스팅임을 미리 알립니다.

 

 

 


 

자바스크립트 기본 문법  ::  창(Window) 제어

 

 

 

 

window.open 메소드는 새로운 창을 생성해주는 메소드입니다.

 

현대의 브라우저는 대부분 탭을 지원하고 있기 때문에, window.open 은 새 탭을 만들어줍니다.

 

 

 

 

<!DOCTYPE html>
<html>
<style>li {padding:10px; list-style: none}</style>
<body>
<ul>
    <li>
        첫번째 인자는 새 창에 로드할 문서의 URL이다. 인자를 생략하면 이름이 붙지 않은 새 창이 만들어진다.<br />
        <input type="button" onclick="open1()" value="window.open('demo2.html');" />
    </li>
    <li>
        두번째 인자는 새 창의 이름이다. _self는 스크립트가 실행되는 창을 의미한다.<br />
        <input type="button" onclick="open2()" value="window.open('demo2.html', '_self');" />
    </li>
    <li>
        _blank는 새 창을 의미한다. <br />
        <input type="button" onclick="open3()" value="window.open('demo2.html', '_blank');" />
    </li>
    <li>
        창에 이름을 붙일 수 있다. open을 재실행 했을 때 동일한 이름의 창이 있다면 그곳으로 문서가 로드된다.<br />
        <input type="button" onclick="open4()" value="window.open('demo2.html', 'ot');" />
    </li>
    <li>
        세번재 인자는 새 창의 모양과 관련된 속성이 온다.<br />
        <input type="button" onclick="open5()" value="window.open('demo2.html', '_blank', 'width=200, height=200, resizable=yes');" />
    </li>
</ul>
 
<script>
function open1(){
    window.open('demo2.html');
}
function open2(){
    window.open('demo2.html', '_self');
}
function open3(){
    window.open('demo2.html', '_blank');
}
function open4(){
    window.open('demo2.html', 'ot');
}
function open5(){
    window.open('demo2.html', '_blank', 'width=200, height=200, resizable=no');
}
</script>
</body>
</html>

 

 

위의 예제는 생활코딩 것을 그대로 가져왔습니다.

 

 

window.open 의 첫번째 인자는 열 파일을 의미하고,

 

두번째 인자는 열릴 창을 새로 만들것인지, 기존에 열려있던 창을 바꿀 것인지를 결정합니다.

 

세번재 인자를 넣게 되면, 새로 열리는 창이 탭의 형태가 아닌 팝업의 형태로 열리게 됩니다.

 

 

따라서 팝업의 크기를 정해주는 width와 height 속성이 들어가게 됩니다.

 

 

 

resizable 은 팝업의 크기를 사용자가 조절할 수 있느냐, 없느냐를 결정하는 속성입니다.

 

 

 

 

 

자바스크립트 기본 문법  ::  창(Window) 간 상호작용

 

 

 

 

 

 

창 간 상호작용은 현재 보안상의 이유로 같은 도메인 내에서만 동작하고 있습니다.

 

 

 

 

<!DOCTYPE html>
<html>
<body>
    <input type="button" value="open" onclick="winopen();" />
    <input type="text" onkeypress="winmessage(this.value)" />
    <input type="button" value="close" onclick="winclose()" />
    <script>
    function winopen(){
        win = window.open('demo2.html', 'ot', 'width=300px, height=500px');
    }
    function winmessage(msg){
        win.document.getElementById('message').innerText=msg;
    }
    function winclose(){
        win.close();
    }
    </script>
</body>
</html>

 

 

 

 

<!DOCTYPE html>
<html>
<body>
    <div id="message"></div>
</body>
</html>

 

 

 

 

 

 

위의 코드는 새로운 창을 열고, 입력창에 글자를 타이핑 하면 그 글자가 동기화 되어

 

열어진 새 창에 출력되는 코드입니다.

 

 

 

 

 

 

 

winmessage 함수를 보면, getElementById('message') 부분이 있는데,

 

이는 새로 만들어질 창의 div 이름입니다.

 

 

이 div 박스 안에 우리가 입력한 글자가 그대로 출력됩니다.

 

 

 

이 실습은 각자 서버가 있어야하기 때문에, 서버 구축을 하고 테스트 해보시길 바랍니다.

 

 

 

참고로 저는 vscode 에서 아파치깔아 실습 진행했습니다.

 

 

 

 

 

자바스크립트 기본 문법  ::  팝업 차단

 

 

사용자의 인터렉션 없이 창을 열려고 하면 팝업이 차단됩니다.

 

 

 

인터넷 쇼핑같은거 할 때 보면 화면 우측 상단에 팝업 차단됨 이라고 뜨는거 자주 보셨죠?

 

 

사용자가 팝업을 보겠다고 하지 않는 이상 window.open 으로 열어진 팝업은 브라우저 상에서

자체적으로 차단시킵니다.

 

 

 

 

728x90
반응형

'Archive > Develop' 카테고리의 다른 글

[ JavaScript ] 제어 대상 찾기 - 제이쿼리(jQuery)  (0) 2021.02.07
[ JavaScript ] 제어 대상 찾기 - getElementById, getElementsByClassName, getElementsByTagName  (0) 2021.02.07
[ JavaScript ] 자바스크립트 기본 문법 | Navigator 객체 | 크로스 브라우저 이슈 해결  (0) 2021.02.07
[ JavaScript ] 자바스크립트 기본 문법 | Location 객체 | 자바스크립트 url 이동  (0) 2021.02.07
[ JavaScript ] 자바스크립트 기본 문법 | BOM(Browser Obejct Model) 이란 무엇인가 | 전역객체 window  (0) 2021.02.07
  1.  
  2. 자바스크립트 기본 문법  ::  창(Window) 제어
  3. 자바스크립트 기본 문법  ::  창(Window) 간 상호작용
  4. 자바스크립트 기본 문법  ::  팝업 차단
'Archive/Develop' 카테고리의 다른 글
  • [ JavaScript ] 제어 대상 찾기 - 제이쿼리(jQuery)
  • [ JavaScript ] 제어 대상 찾기 - getElementById, getElementsByClassName, getElementsByTagName
  • [ JavaScript ] 자바스크립트 기본 문법 | Navigator 객체 | 크로스 브라우저 이슈 해결
  • [ JavaScript ] 자바스크립트 기본 문법 | Location 객체 | 자바스크립트 url 이동
코뮤(commu)
코뮤(commu)
코딩으로 커뮤니케이션하는 코뮤입니다 😎
  • 코뮤(commu)
    코뮤(COMMU)
    코뮤(commu)
  • 전체
    오늘
    어제
    • 분류 전체보기
      • Archive
        • Hacking
        • Develop
        • ETC
      • Algorithm
      • DB&Infra
      • ETC
      • Node
  • 블로그 메뉴

    • 홈
    • 태그
    • 방명록
  • 링크

    • IT지식보따리
    • IT가 맛있다
    • IT 천재
  • 공지사항

    • 배고픕니다
  • 인기 글

  • 태그

    파이썬 문제
    코드업 파이썬 기초 100제
    javascript
    카카오 100일 프로젝트
    docker
    파이썬 백준
    파이썬 기초 문제
    자바스크립트 객체
    보안뉴스
    Oracle
    Codeup
    파이썬 기초
    백준 문제풀이
    Python
    백준 파이썬
    오라클
    장고
    oracle db
    비박스
    코드업 기초
    Git
    백준
    Django
    코드업
    C++
    백준 풀이
    자바스크립트
    파이썬 알고리즘
    파이썬
    자바스크립트 API
  • 최근 댓글

  • 최근 글

  • hELLO· Designed By정상우.v4.10.1
코뮤(commu)
[ JavaScript ] 자바스크립트 기본 문법 | 창(window) 제어 | 팝업 차단
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.