JavaScript가 새 창이 아닌 탭으로 열립니다


364

window.open(url)항목을 선택할 때 호출되는 선택 상자가 있습니다. Firefox는 기본적으로 페이지를 새 탭에서 엽니 다. 그러나 페이지를 새 탭이 아닌 새 창에서 열고 싶습니다.

어떻게하면됩니까?




답변:


456

창에 너비 / 높이가있는 'specs'매개 변수를 제공하십시오. 가능한 모든 옵션 은 여기 를 참조 하십시오 .

window.open(url, windowName, "height=200,width=200");

너비 / 높이를 지정하면 탭 대신 새 창에서 열립니다.


5
좋은 팁. Opera는 여전히 탭에서 이것을 열 것이라고 생각합니다 :).
Kevin Tighe

7
IE6, FF 3.6, Chrome 9.0에서 작업
James Westgate 11

3
FF 11.0에서 더 이상 작동하지 않습니다. 내 질문을 참조하십시오 ! @James
TMS

14
오늘의 브라우저에서는 작동하지 않습니다. 기본적으로 모두 현재 창의 새 탭에서 새 창을 엽니 다. 또한 브라우저 옵션에 따라 다릅니다. JavaScript를 사용하여 제어 할 수 없습니다.
Pavel Hodek

3
새 창에서 열기를 수행하는 "height = 200, width = 200"을 입력 한 것은 아닙니다. 이것은 단순히 추가 매개 변수 (위치, 상태 등 .... 상관 없음)를 넣는 사실입니다.
Peter

110

높이를 사용할 필요는 없습니다.을 사용하지 않으면 _blank새 탭에서 열립니다.

빈 창 :

window.open('', '_blank', 'toolbar=0,location=0,menubar=0');

특정 URL의 경우 :

window.open('http://www.google.com', '_blank', 'toolbar=0,location=0,menubar=0');

3
하지만 이름을 지정하려면 어떻게해야합니까?
Aditi

적어도 Chrome에서는 location=0버튼이나 앵커 요소에서 JS를 호출 할 때 필요합니다.
Ohad Schneider

완벽하게 작동했습니다. firefox에도 location = 0을 포함시켜야했습니다.
Rick james

@nwbrad 다른 값을 지정하지 않으면 '_blank'가 기본값이므로 '_blank'부분에 대해 확신합니다. 귀하의 경우 새 탭 대신 새 창을 열면 window.open 함수에 세 번째 매개 변수를 제공하여 무언가를 수행해야합니다. 귀하의 경우 'toolbar = 0, location = 0, menubar = 0'입니다. 이 세 번째 매개 변수를 생략하고 두 번째 매개 변수로 '_blank'를 남겨두면이를 확인할 수 있습니다.
user1451111

Firefox 76 및 Internet Explorer 11과 같은 최신 브라우저에서 완벽하게 작동합니다. 팁은 location=0매개 변수를 추가하는 것 입니다. 또한 _blank사용자가 팝업을 여는 요소를 여러 번 클릭 focus()하고 이미 열린 팝업이 포커스 를 갖도록 체인을 연결하는 경우 동일한 창을 다시 사용하도록 대상 을 사용하는 대신 창 이름을 지정하는 것이 좋습니다 .window.open('http://stackoverflow.com', 'Stack_Overflow','location=0').focus();
OuzoPower

82

나는 틀릴 수도 있지만, 내가 이해 한 바에 따르면, 이것은 사용자의 브라우저 환경 설정에 의해 제어되며 이것이 무시 될 수 있다고 생각하지 않습니다.


1
사용자는 "about : config"환경 설정 "browser.tabs.opentabfor.windowopen"을 true로 설정할 수 있지만 전역 설정이므로 사용자 브라우저의 전역 동작을 변경하고 싶지 않습니다.)
adam

45
작동하는 코드가 있다고 말했습니다. 이것을 firebug 콘솔에 입력했습니다 : window.open ( "", "poop", "height = 200, width = 200, modal = yes, alwaysRaised = yes"); 그리고 무엇을 추측 ??? 효과가있다!!!!!!

24
예, 작동하지만 약간의 해킹 인 것 같습니다. Firefox는 새 창 대 탭을 여는 것이 자바 스크립트 환경 설정이 아니라 브라우저 환경 설정이되도록 작성되었습니다. 따라서 이후 버전의 firefox에서는 제안이 동일하게 작동하지 않을 수 있습니다. 오히려 해킹에 의존하지 않을 것입니다.
adam

2
그리고 분명히, 그것이 자바 스크립트 해킹이라는 것을 의미하지는 않습니다. 명확하게되는 창 높이를 추가하고 폭하면 JS window.open 방법의 기능 ( w3schools.com/HTMLDOM/met_win_open.asp ) I 평균 해킹 파이어 폭스의 의도 된 동작을 조작 의미한다.
adam

2
나는 실제로 그것을 해킹이라고 부르지 않을 것입니다. 실제로 원하는 행동에 대해 타협하고 대신 구현합니다.
Matchu

15

시험:

window.open("", [window name], "height=XXX,width=XXX,modal=yes,alwaysRaised=yes");

나는 당신의 말을하는 코드가 있지만 그 안에 많은 매개 변수가 있습니다. 나는 이것이 최소한이라고 생각합니다. 작동하지 않으면 알려주십시오. 나머지는 게시 할 것입니다.


"modal = yes"옵션 만 사용하는 FF 31 및 Chrome 36에서 작동합니다. 지정된 모든 옵션도 작동합니다. 또한 FF 환경 설정에서 "대신 새 탭에서 새 창 열기"를 선택했습니다. 열린 옵션이 없으면 새 탭에서 창이 열립니다.
클린트 Pachl

몇 가지 더 테스트 한 후에는 적어도 하나의 매개 변수가있는 한 거의 모든 매개 변수가 탭 대신 새 창을 여는 것처럼 보입니다. 예를 들어 FF 31과 Chrome 36에서도 "top = 0"만 작동합니다. 이것은 cwm 창 관리자를 사용하는 OpenBSD에 있습니다. 따라서 결과가 다를 수 있습니다.
클린트 Pachl

[창 이름]이란 무엇입니까?
pcs

10

많은 테스트를 한 후 여기에 내 결론이 있습니다.

수행 할 때 :

     window.open('www.yourdomain.tld','_blank');
     window.open('www.yourdomain.tld','myWindow');

또는 대상 필드에 입력 한 내용은 아무 것도 변경되지 않습니다. 새 페이지가 새 탭에서 열립니다 (사용자 기본 설정에 따라 다름)

페이지를 새로운 "실제"창에서 열려면 추가 매개 변수를 넣어야합니다. 처럼:

window.open('www.yourdomain.tld', 'mywindow','location=1,status=1,scrollbars=1, resizable=1, directories=1, toolbar=1, titlebar=1');

테스트 후, 그것은 당신이 사용하는 여분의 매개 변수처럼 보이지만 실제로는 중요하지 않습니다. 이것은 당신이 "이 매개 변수"나 "이 다른 것"을 넣는 것이 아니라 새로운 "진짜 창"을 만드는 것이 아니라 새로운 매개 변수가 있다는 사실입니다. ).

그러나 뭔가 혼란스럽고 많은 잘못된 답변을 설명 할 수 있습니다.

이:

 win1 = window.open('myurl1', 'ID_WIN');
 win2 = window.open('myurl2', 'ID_WIN', 'location=1,status=1,scrollbars=1');

이:

 win2 = window.open('myurl2', 'ID_WIN', 'location=1,status=1,scrollbars=1');
 win1 = window.open('myurl1', 'ID_WIN');

동일한 결과를 제공하지 않습니다.

첫 번째 경우, 추가 매개 변수 없이 페이지를 처음 열면 새 에서 열립니다 . 이 경우 사용자가 지정한 이름으로 인해이 탭 에서 두 번째 통화도 열립니다 .

두 번째의 경우, 첫 번째 호출이 될 때 함께 추가 매개 변수 페이지가 새로운 "에서 열립니다 실제 창 ". 이 경우 추가 매개 변수없이 두 번째 호출을 수행하더라도이 새로운 " 실제 창 " 에서도 열리지 만 동일한 탭에서 열립니다 !

즉, 첫 번째 호출은 페이지를 넣을 위치를 결정할 때 중요합니다.


이 답변에는 많은 ++++가 있어야합니다.
Mitch VanDuyn

9

필요하지 않습니다. 사용자가 원하는 환경 설정을 갖도록 허용하십시오.

Firefox는 기본적으로 새 창에서 페이지를 여는 것이 성가 시므로 사용자가 원하지 않는 경우 페이지를 열 수 없도록해야합니다. (Firefox를 사용하면 탭을 새 창에서 열 수 있습니다).


31
당신은 너무 잘못입니다. 그런데, "당신이 필요로하지 말아야합니다"라고 말하는 것은 적절하지 않습니다. 특히 상사가 원하는 것이라면

8
의견을 실용적이고 도움이되도록 노력하자. 우리는 모욕하지 않고 동의 할 수 없습니다.
adam

17
@theman_on_vista : 당신의 상사를 설득하는 것은 당신의 책임입니다. 귀사는 설계 문제 해결에 대한 책임을 귀하에게 부여했습니다. 여기에는 잘못된 디자인 아이디어를 지적하는 것이 포함됩니다.
EFraim

2
그렇습니다. 화면은 사용자의 것이며 다른 사람은 없습니다.
Christopher Creutzig

12
팝업이나 탭을 선택하는 것은 디자이너의 영역에 있습니다. 나는 항상 탭을 선호하는 사용자이지만 때로는 디자인이 실제로 팝업을 요구하거나 실제로 탭을 요구한다는 것을 알고 있습니다. 가능하게하려면 프로그래머 영역에 있어야합니다. 철학적 인 차이점을 제외하고, 이런 종류의 주석은 프로그래밍 참조 사이트에는 전적으로 부적절합니다. 그리고이 경우에는 "그렇지 않습니까?" 질문. "어떻게합니까?"
jbenet

9

다음 기능을 시도해 볼 수 있습니다.

<script type="text/javascript">
function open(url)
{
  var popup = window.open(url, "_blank", "width=200, height=200") ;
  popup.location = URL;
}
</script>

실행을위한 HTML 코드 :

<a href="#" onclick="open('http://www.google.com')">google search</a>

2
의 목적은 무엇입니까 popup.location = URL;? window.open()호출은 적절한 URL로 열어야합니다, 당신의 코드 예제에서, URL이 실험 (그리고 널리 지원)로 다시 떨어질 것입니다 수 있도록 정의되지 않은 URL 객체 . 그것을 위해 그것을 사용하는 것은 논쟁의 여지가 있지만, 여기서 사용하기위한 동기가 무엇인지 궁금합니다.
ken

확실하게 대답하고 위치를 편집 불가능하게 만드는 방법을 가르쳐주었습니다. 감사합니다
VirtualProdigy

6

핵심은 매개 변수입니다.

당신이 경우 제공 [높이 = ""너비 = ""] 매개 변수, 그것은 새 창에서 열립니다.

Parameters를 제공하지 않으면 새 탭에서 열립니다.

Chrome 및 Firefox에서 테스트


1
newwin = window.open ( 'test.aspx', '', ''); Chrome에서 테스트 : 26
MuniR

5

흥미롭게도 window.open의 세 번째 속성에 문자열 (널 문자열 또는 속성 목록과 달리)을 전달하면 Chrome, Firefox 및 IE의 새 탭에서 열립니다. 결석 한 경우 행동이 달라졌습니다.

그래서 이것은 나의 새로운 부름입니다.

 window.open(url, windowName, '');

그래도 원래 포스터가 새 창에서 팝업을 열려고하지 않습니까? 또한 IE 11에서는 사용자가 제공 한 코드 스 니펫이 사용자의 브라우저 환경 설정에 따라 새 창 또는 탭을 엽니 다.

4

그 방법을 시도하십시오 .....

function popitup(url) {
       //alert(url);
       newwindow=window.open("http://www.zeeshanakhter.com","_blank","toolbar=yes,scrollbars=yes, resizable=yes, top=500, left=500, width=400, height=400");
       newwindow.moveTo(350,150);
   if (window.focus) 
          {
             newwindow.focus()
          }
   return false;
  }

3

나에게 해결책은

"location=0"

세 번째 매개 변수에서 최신 FF / Chrome 및 이전 버전의 IE11에서 테스트되었습니다.

내가 사용하는 전체 메소드 호출은 다음과 같습니다 (가변 너비를 사용하고 싶습니다).

window.open(url, "window" + id, 'toolbar=0,location=0,scrollbars=1,statusbar=1,menubar=0,resizable=1,width=' + width + ',height=800,left=100,top=50');

2

방금 IE (11) 및 Chrome (54.0.2794.1 카나리아 SyzyASan)으로 시도했습니다.

window.open(url, "_blank", "x=y")

... 새 창에서 열었습니다.

어떤 의미 클린트 pachl 그가 어떤 하나 개의 매개 변수를 제공하면 새 창이 열리게 것이라고 말했다 때 바로 그것을했다.

분명히 합법적 인 매개 변수 일 필요는 없습니다!

(YMMV-말했듯이 두 곳에서만 테스트했으며 다음 업그레이드로 인해 결과가 무효화 될 수 있습니다)

ETA : IE에서 창에는 장식이 없습니다.


1

여기에 대답 했습니다 . 그러나 참조를 위해 다시 게시하십시오.

window.open()실제 클릭 이벤트에서 발생하지 않으면 새 탭에서 열리지 않습니다. 주어진 예에서 URL은 실제 클릭 이벤트에서 열립니다. 사용자가 브라우저에서 적절한 설정을 제공 한 경우 작동합니다.

<a class="link">Link</a>
<script  type="text/javascript">
     $("a.link").on("click",function(){
         window.open('www.yourdomain.com','_blank');
     });
</script>

마찬가지로, 클릭 기능 내에서 아약스 호출을 시도하고 성공시 창을 열려면 async : false옵션이 설정된 아약스 호출을 수행하고 있는지 확인하십시오 .


1

html 대상 속성 문제가 아니라고 생각하지만 파이어 폭스 "옵션"메뉴의 "탭"탭에서 "대신 새 탭에서 nw 창 열기"옵션을 선택 해제했습니다. 확인 후 다시 시도하십시오.

여기에 이미지 설명을 입력하십시오


0

나는이 같은 질문을했지만 비교적 간단한 해결책을 찾았습니다.

JavaScript에서는 window.opener !=null;창이 팝업인지 확인하고있었습니다. 비슷한 탐지 코드를 사용하여 사이트의 창을 렌더링 중인지 확인하면 새 창 JavaScript를 사용하여 "새" 창 을 열 때 쉽게 "끄기" 할 수 있습니다 .

항상 "새" 창이 되기를 원하는 페이지의 맨 위에 두십시오 .

<script type="text/javascript">
    window.opener=null;
</script>

내 사이트의 로그인 페이지에서이를 사용하므로 사용자가 팝업 창을 사용하여 내 사이트로 이동하면 팝업 동작이 나타나지 않습니다.

이를 수행하는 간단한 리디렉션 페이지를 만든 다음 제공 한 URL로 이동할 수도 있습니다. 같은 것

부모 페이지의 JavaScript :

window.open("MyRedirect.html?URL="+URL, "_blank");

그리고 여기 에서 작은 자바 스크립트를 사용 하면 URL을 가져 와서 리디렉션 할 수 있습니다.

리디렉션 페이지의 JavaScript :

 <script type="text/javascript">
        window.opener=null;

    function getSearchParameters() {
          var prmstr = window.location.search.substr(1);
          return prmstr != null && prmstr != "" ? transformToAssocArray(prmstr) : {};
    }

    function transformToAssocArray( prmstr ) {
        var params = {};
        var prmarr = prmstr.split("&");
        for ( var i = 0; i < prmarr.length; i++) {
            var tmparr = prmarr[i].split("=");
            params[tmparr[0]] = tmparr[1];
        }
        return params;
    }

    var params = getSearchParameters();
    window.location = params.URL;
    </script>
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.