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

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

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

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

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



답변

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

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

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


답변

이것은 속임수입니다.

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/


답변

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 호출을 수행하고 있는지 확인하십시오 .


답변

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

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

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

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

데모

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

인터넷 익스플로러 (11)

Internet Explorer 설정 대화 상자 1

Internet Explorer 탭 설정 대화 상자

테스트 페이지

위에서 설명한대로 새 창에서 팝업을 열도록 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은 어떻습니까? window.openInternet Explorer (11) 및 Firefox (29)와는 다르게 구현 됩니다.

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.openChrome 에서 동작은 onclick이벤트에 사용될 때 새 탭에서 팝업 을 열고 브라우저 콘솔에서 사용될 때 새 창에서 팝업을 여는 것으로 보입니다 ( 다른 사람들이 언급 한 것처럼) ), 및 새 창시에서 열을 너비와 높이로 지정됩니다.

요약

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

추가 자료


답변

짧막 한 농담:

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(이 페이지의 다른 솔루션뿐만 아니라)도 사용자 작업 콜백 중에 호출해야합니다 (예 : 내부 클릭 이벤트 (콜백 함수에서 직접 필요하지 않지만 클릭 동작 중).

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


답변

를 사용하면 window.open(url, '_blank')Chrome에서 차단 (팝업 차단)됩니다.

이 시도:

//With JQuery

$('#myButton').click(function () {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
});

순수한 JavaScript로

document.querySelector('#myButton').onclick = function() {
    var redirectWindow = window.open('http://google.com', '_blank');
    redirectWindow.location;
};


답변

Steven Spielberg의 답변을 자세히 설명하기 위해 나는 이런 경우에 이렇게했습니다.

$('a').click(function() {
  $(this).attr('target', '_blank');
});

이렇게하면 브라우저가 대상 속성을 설정하는 링크를 따라 가기 직전에 링크가 새 탭이나 창에서 열립니다 ( 사용자 설정에 따라 다름 ).

jQuery의 한 줄 예 :

$('a').attr('target', '_blank').get(0).click();
// The `.get(0)` must be there to return the actual DOM element.
// Doing `.click()` on the jQuery object for it did not work.

기본 브라우저 DOM API를 사용하여 수행 할 수도 있습니다.

document.querySelector('a').setAttribute('target', '_blank');
document.querySelector('a').click();