새 탭이 아닌 새 탭에서 URL을 엽니 다.

javascript


팝업 창과 달리 새 탭에서 URL 을 열려고합니다 .

응답이 다음과 같이 보이는 관련 질문을 보았습니다.

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

그러나 그들 중 누구도 나를 위해 일하지 않았습니다. 브라우저는 여전히 팝업 창을 열려고했습니다.




Answer 1 Quentin


저자가 할 수있는 일은 새 창 대신 새 탭에서 열도록 선택할 수 없습니다. 그것은이다 사용자 기본 설정 . (대부분의 브라우저에서 기본 사용자 환경 설정은 새 탭에 대한 것이므로 해당 환경 설정이 변경되지 않은 브라우저에서의 사소한 테스트는이를 보여주지 않습니다.)

CSS3는 target-new를 제안 했지만 사양은 폐기되었습니다 .

반대 는 사실이 아닙니다. window.open() 의 세 번째 인수에서 창의 크기를 지정 하면 환경 설정이 탭에 대한 것일 때 새 창을 트리거 할 수 있습니다.




Answer 2 Rinto George


이것은 속임수입니다.

function openInNewTab(url) {
  var win = window.open(url, '_blank');
  win.focus();
}

대부분의 경우 팝업 차단기와 기본 "새 창"동작을 방지하기 위해 링크 의 onclick 핸들러 에서 직접 발생해야합니다 . 이 방법으로 또는 DOM 객체에 이벤트 리스너를 추가하면 됩니다.

<div onclick="openInNewTab('www.test.com');">Something To Click On</div>

http://www.tutsplanet.com/open-url-new-tab-using-javascript/




Answer 3 Venkat Kotra


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

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

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




Answer 4 Peter Mortensen


window.open 모든 브라우저의 새 탭에서 팝업을 안정적으로 열 수 없음

다른 브라우저는 특히 사용자의 브라우저 환경 설정과 관련하여 다른 방식 으로 window.open 의 동작을 구현합니다 . 사용자의 브라우저 환경 설정을 처리하는 방식이 다르기 때문에 모든 Internet Explorer, Firefox 및 Chrome에서 window.open 에 대해 동일한 동작이 적용되는 것을 기대할 수는 없습니다 .

예를 들어 Internet Explorer (11) 사용자는 새 창이나 새 탭에서 팝업을 열도록 선택할 수 있습니다. Internet Explorer 11 사용자Quentin의 답변 에서 설명한 것처럼 window.open통해 특정 방식으로 팝업을 열 수 없습니다 .

Firefox (29) 사용자의 경우 window.open(url, '_blank') 은 브라우저의 탭 환경 설정에 따라 다르지만 너비와 높이를 지정하여 새 창에서 팝업을 강제로 열 수 있습니다 ( " Chrome? '섹션 아래).

Demonstration

브라우저 설정으로 이동하여 새 창에서 팝업을 열도록 구성하십시오.

인터넷 익스플로러 (11)

Internet Explorer settings dialog 1

Internet Explorer tab settings dialog

테스트 페이지

위에서 설명한 것처럼 새 창에서 팝업을 열도록 Internet Explorer (11)를 설정 한 후 다음 테스트 페이지를 사용하여 window.open 을 테스트하십시오 .

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814');">
      <code>window.open(url)</code>
    </button>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', '_blank');">
      <code>window.open(url, '_blank')</code>
    </button>
  </body>
</html>

팝업이 새 탭이 아닌 새 창에서 열리는 지 확인 하십시오.

탭 환경 설정이 새 창으로 설정된 상태에서 Firefox (29)에서 위의 스 니펫을 테스트하고 동일한 결과를 볼 수 있습니다.

Chrome은 어떻습니까? Internet Explorer (11) 및 Firefox (29)와 다르게 window.open 을 구현 합니다.

100 % 확실하지 않지만 Chrome (버전 34.0.1847.131 m )에 새 창이나 새 탭에서 팝업을 열지 여부를 선택하는 데 사용할 수있는 설정이없는 것처럼 보입니다 (예 : Firefox와 Internet Explorer가 있습니다). 팝업 관리를 위해 Chrome 설명서를 확인 했습니다. 했지만 그 종류에 대해서는 언급하지 않았습니다.

또한 다시 한 번 다른 브라우저는 window.open 의 동작을 다르게 구현하는 것으로 보입니다 . Chrome 및 Firefox에서 너비와 높이를 지정하면 사용자가 Firefox (29)가 새 탭에서 새 창을 열도록 설정 한 경우에도 팝업 이 표시됩니다 (탭이 아닌 새 창에서 열린 JavaScript 에 대한 답변에서 언급 한 것처럼 ) :

<!DOCTYPE html>
<html>
  <head>
    <title>Test</title>
  </head>

  <body>
    <button onclick="window.open('https://stackoverflow.com/q/4907843/456814', 'test', 'width=400, height=400');">
      <code>window.open(url)</code>
    </button>
  </body>
</html>

그러나 사용자가 탭을 브라우저 기본 설정으로 설정 하고 너비와 높이를 지정하지 않아도 위의 동일한 코드 스 니펫 은 Internet Explorer 11에서 항상 새 탭을 엽니 다 .

의 동작 그래서 window.open 크롬이 사용되는 경우 새 탭에서 열기 팝업을 것 같다 onclick 이벤트 (브라우저 콘솔에서 사용할 때 새 창에서 열 수 있습니다 다른 사람에 의해 언급 된 바와 같이 ), 그리고 그들을 열 너비와 높이로 지정된 새 창에서.

Summary

다른 브라우저는 사용자의 브라우저 환경 설정과 관련하여 window.open 동작을 다르게 구현합니다 . 사용자의 브라우저 환경 설정을 처리하는 방식이 다르기 때문에 모든 Internet Explorer, Firefox 및 Chrome에서 window.open 에 대해 동일한 동작이 적용되는 것을 기대할 수는 없습니다 .

추가 자료




Answer 5 pie6k


짧막 한 농담:

Object.assign(document.createElement('a'), { target: '_blank', href: 'URL_HERE'}).click();

그것은 가상 생성 a 이 부여 요소 target="_blank" 이 새 탭에서 열립니다 그것을 제대로 제공되도록 url href 하고 다음을 클릭합니다.

그리고 원하는 경우이를 바탕으로 몇 가지 기능을 만들 수 있습니다.

function openInNewTab(href) {
  Object.assign(document.createElement('a'), {
    target: '_blank',
    href,
  }).click();
}

그런 다음 다음과 같이 사용할 수 있습니다.

openInNewTab("https://google.com"); 

중요 사항:

openInNewTab 사용자 조치 콜백 중에 openInNewTab (및이 페이지의 다른 솔루션)을 호출해야합니다 (예 : 내부 클릭 이벤트 (콜백 함수에서 직접 필요하지 않지만 클릭 동작 중).

임의의 임의의 순간에 (예 : 간격 내부 또는 서버 응답 후) 수동으로 호출하는 경우 브라우저에 의해 차단 될 수 있습니다 (보안 위험이 있으므로 사용자 경험이 매우 열악 할 수 있음) )