팝업 창과 달리 새 탭에서 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 (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.open
Internet 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.open
Chrome 에서 동작은 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();