JavaScript에서 target =“_ blank”를 시뮬레이션하는 방법


156

사용자가 링크를 클릭하면 데이터베이스의 필드를 업데이트 한 다음 요청 된 링크를 새 창에서 열어야합니다. 업데이트는 문제가되지 않지만 다른 하이퍼 링크를 클릭하지 않고 새 창을 여는 방법을 모르겠습니다.

<body onLoad="document.getElementById('redirect').click">
<a href="http://www.mydomain.com?ReportID=1" id="redirect" target="_blank">Report</a>
</body>

1
흠? target="_top"새 창에서 열리지 target="_blank"않습니다.
Tomalak

링크가 이미 새 창에서 열려 있고 (target = "_ blank"로 인해) javascript 클릭 핸들러가 이미 데이터베이스를 업데이트하는 경우 Javascript로 새 창을 열어야하는 이유는 무엇입니까?
Joel Mueller

답변:


298
<script>
    window.open('http://www.example.com?ReportID=1', '_blank');
</script>

두 번째 매개 변수는 선택 사항이며 대상 창의 이름입니다.


2
window.opentarget="_blank"그것은 무엇을 합니까-그것은 새 창에서 URL을 엽니 다.
ceejayoz

3
예. window.open ()의 두 번째 인수는 링크에 대상을 설정하는 것과 유사하게 창에 제공하려는 "이름"입니다. developer.mozilla.org/En/DOM:window.open
Omer Bokhari

2
아, 알겠습니다 window.open은 Firefox 팝업 차단기에 의해 차단되지만 target = "_ blank"는 차단되지 않습니다. 클라이언트에게 자신의 웹 사이트에서 팝업을 활성화하도록 요청해야합니까?
Phillip Senn

7
Firefox와 같은 팝업 차단기에 의해 차단되지 않는 JavaScript 솔루션이 있습니까?
ma11hew28

4
@MattDiPasquale blocking window.open은 일종의 팝업 차단기입니다! 클릭 동작에 대한 응답으로 전화를 걸면 차단되지 않을 가능성이 높습니다.
William Denniss

19

이것은 도움이 될 수 있습니다

var link = document.createElementNS("http://www.w3.org/1999/xhtml", "a");
    link.href = 'http://www.google.com';
    link.target = '_blank';
    var event = new MouseEvent('click', {
        'view': window,
        'bubbles': false,
        'cancelable': true
    });
    link.dispatchEvent(event);

IE11 : "런타임 자바 스크립트 오류 : 개체에 대한 유효한 작업이 아닙니다"
T-moty

8
이 답변은 무슨 일이 일어나고 있는지에 대한 설명을 추가함으로써 개선 될 수 있습니다.
Elly Post

13

나는 이것이 완료되고 정리 된 거래라는 것을 알고 있지만 여기 내 앱의 문제를 해결하기 위해 사용하고있는 것이 있습니다.

if (!e.target.hasAttribute("target")) {
    e.preventDefault();     
    e.target.setAttribute("target", "_blank");
    e.target.click();
    return;
}

기본적으로 여기서 일어나는 일은 링크에 target=_blank속성 이 있는지 확인하는 것입니다. 그렇지 않으면 링크 트리거링을 중지하고 새 창에서 열도록 설정 한 다음 프로그래밍 방식으로 클릭합니다.

한 단계 더 나아가서 다음을 시도하여 원래 클릭 중지를 건너 뛸 수 있습니다 (그리고 코드를 훨씬 간단하게 만들 수 있습니다).

if (!e.target.hasAttribute("target")) {
    e.target.setAttribute("target", "_blank");
}

jQuery를 사용하여 속성 크로스 브라우저 추가 구현을 추상화하는 경우 다음 대신에 이것을 사용해야합니다 e.target.setAttribute("target", "_blank").

    jQuery(event.target).attr("target", "_blank")

정확한 사용 사례에 맞게 재 작업해야 할 수도 있지만 여기에 내 가려움증이 생겼습니다.

여기 당신이 엉망으로 만드는 데모 가 있습니다.

(jsfiddle의 링크는이 토론으로 돌아갑니다. 새 탭이 필요 없습니다.)


1
jquery를 사용하고 window.open 팝업 차단 문제를 피하기 때문에이 답변을 선호합니다. 이는 대상이없는 링크가 포함 된 일부 타사 데이터를 처리 할 때 완벽하게 합법적입니다.
IncredibleHat

7

단일 링크에 대한 것이라면 개인적으로 다음 코드를 사용하는 것이 좋습니다. 그렇지 않으면 비슷한 코드로 함수를 만드는 것이 가장 좋습니다.

onclick="this.target='_blank';"

나는 그것을 W3C의 XHTML 엄격한 테스트를 우회하기 위해 사용하기 시작했다.


1
인라인 JavaScript는 어디에서나 작동하는 "비표준"속성을 추가하는 것보다 더 복잡하다고 생각합니다.
Matti Virkkunen

특정 상황에서 @MattiVirkkunen이 유일한 해결책입니다
Claudiu Creanga

1
@Claudiu : 당신이 그런 터무니없는 상황에 처해 있다면, 그 대신에 원인을 해결해야합니다.
Matti Virkkunen

5

이것이 jQuery로 수행하는 방법입니다. 새 창에서 열려는 각 링크에 대한 클래스가 있습니다.

$(function(){

    $(".external").click(function(e) {
        e.preventDefault();
        window.open(this.href);
    });
});

2

a 태그에서 href를 추출 할 수 있습니다.

window.open(document.getElementById('redirect').href);

1

이렇게하면 모든 페이지 링크여는 데 도움이 될 수 있습니다 .

$(".myClass").each(
     function(i,e){
        window.open(e, '_blank');
     }
);

<a href="" class="myClass"></a>링크 항목을 클릭 한 것처럼 다른 탭에 대한 모든 링크 항목 이 열립니다 .

브라우저 콘솔에만 붙여 넣기 만하면됩니다. 필요한 jQuery 프레임 워크

당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.