새 창에서 링크를 열려면 어떻게합니까?


94

특정 링크에 대한 클릭 처리기가 있는데 그 안에 다음과 비슷한 작업을 수행하고 싶습니다.

window.location = url

실제로 새 창에서 URL을 열려면 이것이 필요합니다. 어떻게해야합니까?

답변:


204

다음을 좋아할 수 있습니다.

window.open('url', 'window name', 'window settings')

jQuery :

$('a#link_id').click(function(){
  window.open('url', 'window name', 'window settings');
  return false;
});

또한 설정할 수 target_blank실제로.


하지만이 jquery 코드는 자동으로 대상으로 이동하지 않습니다
Amr Elgarhy

26
_blank 그렇게 사용하여 기본 대상 window.open (URL) 충분하다
themerlinproject

확실하지 않고 정확히 동일한 문제는 아니지만 파일 을 다운로드 하는 동일한 솔루션을 찾고 있었으며 (링크가 아니라 버튼에서) Chrome에서 단순히 window.location으로 변경하기 전까지는 창이 열리지 않았고 다운로드가 없습니다. 위치를 변경하지 않고 파일을 다운로드하는 'url'...
gdoumenc

window.open (url)은 괜찮습니다 :)
fudu

33

클릭 핸들러 내에서 타겟을 강제하는 방법은 다음과 같습니다.

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

5
클릭 핸들러에서 jQuery 선택기를 사용할 필요가 없으므로 행 $(this).attr('target', '_blank'); 을 다음으로 변경할 수 있습니다 this.target = "_blank";. 페이지의 앵커 링크가 rel="external"속성 을 갖도록 수정 될 수있는 경우 jQuery 선택기를 사용 a[rel="external"]하는 대신 페이지에 대한 글로벌 클릭 핸들러를 만들 수 있습니다 . 링크 당 처리기를 클릭하면로 선택a#link_id
himanshu

17

5
이런! w3schools를 사용하거나 링크하지 마십시오. W3C와 관련이 없습니다. 대신 MDN 사용 : developer.mozilla.org/en-US/docs/Web/API/Window.open
AB Carroll

5
w3schools는 좋습니다 ( '몇 안되는'w3c 트롤 무시) ... 계속해서 권위있는 소스가 될 것입니다 ... 심지어 w3c도 지금 다시 지원하고 있습니다 ;-)
Dawesi

4

이를 위해 jquery prop () 메서드를 사용할 수도 있습니다.

$(function(){
  $('yourselector').prop('target', '_blank');
}); 

2

이 문제에 대한 흥미로운 해결책을 찾았습니다. 웹 서비스의 반환을 기반으로 정보를 포함하는 스팬을 만들고있었습니다. 클릭하면 "a"가 클릭을 캡처 할 수 있도록 범위 주위에 링크를 배치하려고 생각했습니다.

하지만 스팬으로 클릭을 캡처하려고했기 때문에 스팬을 만들 때 왜 이렇게하지 않는지 생각했습니다.

var span = $('<span id="something" data-href="'+url+'" />');

그런 다음 'data-href'속성을 기반으로 링크를 생성 한 범위에 클릭 핸들러를 바인딩했습니다.

span.click(function(e) {
    e.stopPropagation();
    var href = $(this).attr('data-href');
    var link = $('<a href="http://' + href + '" />');
    link.attr('target', '_blank');
    window.open(link.attr('href'));
});

이를 통해 성공적으로 범위를 클릭하고 적절한 URL로 새 창을 열 수있었습니다.


1

뭐가 문제 야 <a href="myurl.html" target="_blank">My Link</a>? 자바 스크립트가 필요하지 않습니다 ...


1

이 솔루션은 또한 url이 비어 있고 빈 링크를 비활성화 (회색)하는 경우를 고려했습니다.

$(function() {
  changeAnchor();
});

function changeAnchor() {
  $("a[name$='aWebsiteUrl']").each(function() { // you can write your selector here
    $(this).css("background", "none");
    $(this).css("font-weight", "normal");

    var url = $(this).attr('href').trim();
    if (url == " " || url == "") { //disable empty link
      $(this).attr("class", "disabled");
      $(this).attr("href", "javascript:void(0)");
    } else {
      $(this).attr("target", "_blank");// HERE set the non-empty links, open in new window
    }
  });
}
a.disabled {
  text-decoration: none;
  pointer-events: none;
  cursor: default;
  color: grey;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<a name="aWebsiteUrl" href="http://www.baidu.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href=" " class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.alibaba.com" class='#'>[website]</a>
<a name="aWebsiteUrl" href="http://www.qq.com" class='#'>[website]</a>


0

클릭 이벤트에 대한 이벤트 핸들러 함수 내에서 AJAX 요청실행 하려는 경우주의 하십시오. 어떤 이유로 Chrome (및 기타 브라우저)은 새 탭 / 창을 열지 않습니다.


0

이것은 아주 좋은 수정은 아니지만 작동합니다.

CSS :

.new-tab-opener
{
    display: none;
}

HTML :

<a data-href="http://www.google.com/" href="javascript:">Click here</a>
<form class="new-tab-opener" method="get" target="_blank"></form>

자바 스크립트 :

$('a').on('click', function (e) {    
    var f = $('.new-tab-opener');
    f.attr('action', $(this).attr('data-href'));
    f.submit();
});

라이브 예 : http://jsfiddle.net/7eRLb/


0

Microsoft IE는 두 번째 인수로 이름을 지원하지 않습니다.

window.open('url', 'window name', 'window settings');

문제는 window name입니다. 이것은 작동합니다.

window.open('url', '', 'window settings')

Microsoft는 해당 인수를 사용하는 경우 다음 인수 만 허용합니다.

  • _공백
  • _미디어
  • _부모의
  • _검색
  • _본인
  • _상단

이 Microsoft 사이트 확인


4
-1 : 귀하의 라이선스를 위반하는 stackoverflow.com/a/1462500/560648의 복사 / 붙여 넣기 에도 불구하고 사실이 아닙니다. 인수 지원됩니다 . 공백, 대시 또는 기타 구두점을 포함 할 수 없습니다. 해당 질문에 대한 다른 답변과 의견을 읽으십시오.
궤도에서 가벼운 경주
당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.