자바스크립트 링크 /새 창 크기

 

1.  window.location.href="url" 이용

         :현재 화면이 대체 됨.

 

2. widdow.open("url", "name", "specs","replace" )이용

         - url : 이동할 주소

         - name : 새로 열릴 창의 속성 or 이름 지정

            " _blank ": 새 창이 열림. 기본값

              " _parent" : 부모 프레임에 열림

              " _self ": 현재 페이지 대체

              "- _top" : 로드된 프레임셋을 대체

              " name(임의)" : 새창 이름을 지정함. 동일한 이름에 다시 open()을하면 기존의 열린창의 내용이 바뀜.

      - ​specs : 선택적인 값

            "channelmode=  yes" :   전체화면으로 창이 열림,IE에서만 동작 (값:yes,no,1,0)

            "fullscreen= yes" : 전체 화면 모드. IE에서만 동작 (값:yes,no,1,0)

            "height=pixels" : 창의 높이를 지정

            "width=pixels" : 창의 너비를 지정

            "left=pixels" : 창의 화면 왼쪽에서 위치를 지정. 음수 불가능

             "top=pixels" : 창의 화면 위쪽에서 위치를 지정. 음수 불가능

             "location= yes": 주소 표시줄 사용여부를 지정 (값:yes,no,1,0)

             "menubar=yes" : 메뉴바 사용여부를 지정 (값:yes,no,1,0)

             "resizable=yes" : 창의 리사이즈 가능 여부 지정. IE만 동작 (값:yes,no,1,0)

             "scrollbars=yes" 스크롤바 사용여부 지정

             "status=yes": 상태바 보여줄지 지정 (값:yes,no,1,0)

             "titlebar=yes" : 타이틀바 보여줄지 지정. 호출 응용프로그램이 HTML 응용 프로그램이거나 신뢰할 수

있는 대화 상자가 아니면 무시 (값:yes,no,1,0)

             "toolbar=yes" : 툴바를 보여줄지 지정 (값:yes,no,1,0)

 

 

--  적용

• 일반적인 태그 적용

<script>
//주소, 이름, 설정

function NewWin() {
    window.open("https://www.google.com",  "top=10, left=10, width=500, height=600, status=no, menubar=no, toolbar=no, resizable=no);
}

document.querySelector('.newlink').addEventListener('click',function(){
	NewWin();
});


</script>


//인라인으로 설정시
<a href="javascript:;" onclick="NewWin()"> 이동</a>

//스크립트 분리시
<a class="newlink"  href="javascript:;"> 이동</a>

- 속성을 사용할 필요가 없다면 a 태그의 href를 활용하자.

 

•   <select> 에서 링크

         - selectedIndex 속성사용 

           : 태그에서 선택된 값이 몇번째인지 인덱스를 돌려줌

페이지 이동 네이버

<select class="pagelink">
<option value="">페이지 이동</option>
<option value="https://naver.com">네이버</option>
</select>


<p data-ke-size="size16">&nbsp;</p>
<script>
  const $pagelink = document.querySelector('.pagelink');
      $pagelink.addEventListener('click',function(e){
        let tg=e.target;

     
            let i=tg.selectedIndex; //선택된 옵션의 인덱스를 찾음
            
            if(i!==0){
                let url = tg[i].value;
                window.open(url,"_blank");
                 tg.children[0].selected='true'//선택 후 인덱스 0으로 되돌림
            }
     
    });
</script>