새 창이 아닌 새 탭에서 URL 열기

새 창이 아닌 새 탭에서 URL 열기

팝업 창이 아닌 새 탭에서 URL을 열려고 합니다.

관련 질문 중 어떤 반응이 나올지 본 적이 있습니다.

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

하지만 어느 것도 작동하지 않았고, 브라우저는 여전히 팝업 창을 열려고 했습니다.

이것은 속임수야.

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

//or just
window.open(url, '_blank').focus();

이 .onclick팝업 차단을 방지하기 위한 링크 핸들러 및 기본 "새 창" 동작입니다.할 도 있고, 도 있습니다.DOM★★★★★★ 。

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

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

작성자가 새 창 대신 새 탭에서 열도록 선택할 수 있는 작업은 없습니다. 사용자 환경설정입니다.(대부분의 브라우저에서 기본 사용자 설정은 새로운 탭용이므로 기본 설정이 변경되지 않은 브라우저에서의 사소한 테스트에서는 이를 확인할 수 없습니다.)

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

그 반대는 사실이 아닙니다.창의 특정 창 피쳐를 다음 세 번째 인수로 지정함으로써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옵션 세트

에 의해, 의 「이행」이 됩니다.a "displaces", "displaces"를 합니다.target="_blank"새 탭에서 URL이 됩니다.href클릭을 합니다.

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

이렇게 사용할 수 있습니다.

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

중요사항:

이는 이른바 '신뢰할 수 있는 이벤트' 콜백 중에 호출해야 합니다(예를 들어 클릭 이벤트 중에 직접 호출할 필요는 없지만 클릭 동작 중에 호출됩니다).그렇지 않으면 브라우저에 의해 새 페이지 열기가 차단됩니다.

임의의 타이밍에 수동으로 호출하는 경우(예를 들어 간격 내 또는 서버 응답 후) - 브라우저에 의해 차단될 수 있습니다(이는 보안상의 위험이 있어 사용자 경험 저하로 이어질 수 있습니다).

.window.open

모든 브라우저에서 동일한 동작을 기대할 수 없습니다. window.open브라우저 전체에서 새 탭의 팝업이 안정적으로 열리지 않으며 사용자의 환경설정에 따라 달라집니다.

예를 들어 Internet Explorer(11)에서는 사용자가 새 창 또는 새 탭에서 팝업을 열도록 선택할 수 있지만 Internet Explorer 11에서 특정 방법으로 팝업을 열도록 강제할 수 없습니다.window.open쿠엔틴의 답변에서 암시한 바와 같이.

파이어폭스(29)의 동작은window.open(url, '_blank') 는 브라우저의 탭 설정에 따라 다르지만 폭과 높이를 지정하여 팝업창에서 URL을 강제로 열 수 있습니다(아래의 "크롬" 섹션 참조).

Internet Explorer (11)

Internet Explorer가 새 창에서 팝업을 열도록 설정할 수 있습니다.

후에 다시 한 번 .window.open(url) ★★★★★★★★★★★★★★★★★」window.open(url, '_blank'). 페이지가 새 탭이 아닌 새 창에서 열리는 것을 확인합니다.

파이어폭스(29)

또한 탭 기본 설정을 설정하여 새 창을 열 수 있으며 동일한 결과를 볼 수 있습니다.

크롬

Chrome(버전 34)에서는 새 창 또는 새 탭에서 팝업을 열도록 선택할 수 있는 설정이 없는 것 같습니다.다만, 이 질문에서는, 몇개의 방법(레지스트리 편집)에 대해 설명합니다.

Chrome 및 Firefox에서는 사용자가 새 탭에서 새 창을 열도록 설정한 경우에도 폭과 높이를 지정하면 팝업(여기 답변에 나와 있음)이 강제로 표시됩니다.

let url = 'https://stackoverflow.com'
window.open(url, '', 'width=400, height=400')

다만, Internet Explorer 11 에서는, 브라우저의 프리퍼런스에서 탭이 선택되어 있는 경우, 폭과 높이를 지정해도, 같은 코드의 링크가 항상 새로운 탭에 열립니다.

크롬으로 보면window.open 탭이 열립니다.onclick이벤트 및 새 창은 브라우저 콘솔에서 사용되며(다른 사용자가 참조), 팝업은 너비와 높이가 지정되면 열립니다.

---

정보: ★★★★★★★★★★★★★★★★★★★★★★」window.open 문서를 참조해 주세요.

「 」를 사용하고 window.open(url, '_blank')크롬을 사용하다

이것을 시험해 보세요.

//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;
};

나는 다음을 사용했는데 매우 잘 작동한다!

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

스티븐 스필버그의 대답을 자세히 설명하기 위해, 나는 이런 경우에 이렇게 했다.

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

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

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();

이건 네가 통제할 수 없을 것 같아.사용자가 새 창에서 링크를 열도록 브라우저를 설정한 경우 새 탭에서 링크를 열도록 강제할 수 없습니다.

탭이 아닌 새 창에서 열리는 JavaScript

흥미로운 사실은 사용자가 액션을 호출하지 않거나(버튼 클릭 등), 비동기일 경우 새 탭이 열리지 않는다는 것입니다.

$.ajax({
    url: "url",
    type: "POST",
    success: function() {
        window.open('url', '_blank');              
    }
});

그러나 브라우저 설정에 따라 새 탭에서 열릴 수 있습니다.

$.ajax({
    url: "url",
    type: "POST",
    async: false,
    success: function() {
        window.open('url', '_blank');              
    }
});

URL을 새 탭에서 열 것인지 아니면 새 창에서 열 것인지 여부는 실제로 사용자의 브라우저 환경설정에 의해 제어됩니다.JavaScript에서는 덮어쓸 수 없습니다.

window.open()사용 방법에 따라 동작이 달라집니다.사용자 조작의 직접적인 결과로 호출된 경우, 예를 들어 버튼 클릭은 정상적으로 작동하고 새 탭(또는 창)이 열립니다.

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {
    // open a new tab
    const tab = window.open('https://attacomsian.com', '_blank');
});

단, AJAX 요청 콜백에서 새 탭을 열려고 하면 사용자 직접 작업이 아니므로 브라우저는 해당 탭을 차단합니다.

팝업 블로커를 무시하고 콜백에서 새 탭을 열려면 다음과 같이 간단한 해킹을 수행합니다.

const button = document.querySelector('#openTab');

// add click event listener
button.addEventListener('click', () => {

    // open an empty window
    const tab = window.open('about:blank');

    // make an API call
    fetch('/api/validate')
        .then(res => res.json())
        .then(json => {

            // TODO: do something with JSON response

            // update the actual URL
            tab.location = 'https://attacomsian.com';
            tab.focus();
        })
        .catch(err => {
            // close the empty window
            tab.close();
        });
});

그냥 그냥을 생략하는 생략하고strWindowFeaturesUNLESS 브라우저가 그것(브라우저 설정 으뜸 패는 자바 스크립트)재정의 설정 매개 변수, 새로운 탭이 열린다.브라우저 설정이 이 탭을 재정의하지 않는 한 파라미터는 새 탭을 엽니다(브라우저 설정이 JavaScript보다 우선합니다).

새 창

var myWin = window.open(strUrl, strWindowName, [strWindowFeatures]);

새 탭

var myWin = window.open(strUrl, strWindowName);

-- 또는 --

var myWin = window.open(strUrl);

function openTab(url) {
  const link = document.createElement('a');
  link.href = url;
  link.target = '_blank';
  document.body.appendChild(link);
  link.click();
  link.remove();
}

(function(a){
document.body.appendChild(a);
a.setAttribute('href', location.href);
a.dispatchEvent((function(e){
    e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, true, false, false, false, 0, null);
    return e
}(document.createEvent('MouseEvents'))))}(document.createElement('a')))

커스텀 기능에서 새 탭을 열려고 하는 경우 브라우저 설정과는 무관합니다.

이 페이지에서 JavaScript 콘솔을 열고 다음과 같이 입력합니다.

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").click();

또한 '클릭'은 사용자 지정 동작에서 발생하므로 설정에 관계없이 팝업을 열려고 합니다.

링크에서 실제 마우스 클릭처럼 동작하려면 @spirladimir의 조언을 따라 실제로 작성해야 합니다.

document.getElementById("nav-questions").setAttribute("target", "_blank");
document.getElementById("nav-questions").dispatchEvent((function(e){
  e.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0,
                    false, false, false, false, 0, null);
  return e
}(document.createEvent('MouseEvents'))));

다음은 완전한 예입니다(jsFiddle 또는 유사한 온라인 에디터에서는 외부 페이지로 리다이렉트 할 수 없으므로 시도하지 마십시오).

<!DOCTYPE html>
<html>
<head>
  <style>
    #firing_div {
      margin-top: 15px;
      width: 250px;
      border: 1px solid blue;
      text-align: center;
    }
  </style>
</head>
<body>
  <a id="my_link" href="http://www.google.com"> Go to Google </a>
  <div id="firing_div"> Click me to trigger custom click </div>
</body>
<script>
  function fire_custom_click() {
    alert("firing click!");
    document.getElementById("my_link").dispatchEvent((function(e){
      e.initMouseEvent("click", true, true, window, /* type, canBubble, cancelable, view */
            0, 0, 0, 0, 0,              /* detail, screenX, screenY, clientX, clientY */
            false, false, false, false, /* ctrlKey, altKey, shiftKey, metaKey */
            0, null);                   /* button, relatedTarget */
      return e
    }(document.createEvent('MouseEvents'))));
  }
  document.getElementById("firing_div").onclick = fire_custom_click;
</script>
</html>

당신은트릭을사용할 수 있습니다와 속임수를 사용할 수 있다.form:

$(function () {
    $('#btn').click(function () {
        openNewTab("http://stackoverflow.com")
        return false;
    });
});

function openNewTab(link) {
    var frm = $('<form   method="get" action="' + link + '" target="_blank"></form>')
    $("body").append(frm);
    frm.submit().remove();
}

jsFiddle 데모

JQuery

$('<a />',{'href': url, 'target': '_blank'}).get(0).click();

JS

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

또는 링크 요소를 만들어 클릭하기만 하면 됩니다.

var evLink = document.createElement('a');
evLink.href = 'http://' + strUrl;
evLink.target = '_blank';
document.body.appendChild(evLink);
evLink.click();
// Now delete it
evLink.parentNode.removeChild(evLink);

팝업 차단기에 의해 차단되어서는 안 됩니다.바라건대.

target="_blank" 사용 안 함

항상 그 창을 내 경우에는 특정 이름을 사용한다 경우 해당 창에 항상 특정 이름 사용 내.meaningfulName, 이 경우에는processor 자원:이경우 프로세서리소스를 저장합니다를 구한다.

button.addEventListener('click', () => {
    window.open('https://google.com', 'meaningfulName')
})

이 방법에서는 예를 들어 버튼을 10번 클릭하면 브라우저는 항상 10개의 다른 탭에서 여는 대신 하나의 새로운 탭에서 다시 렌더링하여 리소스를 훨씬 더 많이 소비합니다.

당신은 자세한 것은,을 참조해 주세요에 이에 대해서 더 읽을 수 있다.MDN..

이 질문에 대한 답은 있지만 아니라고는 할 수 없다.

간단한 작업을 찾았습니다.

1단계: 보이지 않는 링크를 만듭니다.

<a id="yourId" href="yourlink.html" target="_blank" style="display: none;"></a>

2단계: 해당 링크를 프로그래밍 방식으로 클릭합니다.

document.getElementById("yourId").click();

여기예요.나한테는 부적이 되는군

새 탭을 열고 동일한 위치에 있으려면 새 탭에서 현재 페이지를 열고 이전 탭을 새 URL로 리디렉션하면 됩니다.

let newUrl = 'http://example.com';
let currentUrl = window.location.href;    
window.open(currentUrl , '_blank'); // open window with url of current page    
location.href = newUrl; // redirect the previous window to the new url

브라우저를 통해 새로 열린 탭으로 자동으로 이동합니다.페이지가 새로고침된 것처럼 보이고 동일한 페이지에 새 창이 나타납니다.

어떻게 단 한을 작성하면 어떨까요를 만드는 것에 대한?<a>A함께와_blank~하듯이로target특성 값과 아트리뷰트 값과url~하듯이로href과 스타일 디스플레이:children 요소와 함께 감춰져 있죠?,스타일 표시:요소로 숨김 자녀?그리고는 DOM고 아이들 요소 확인 이벤트를 추가하다.그런 다음 DOM에 추가한 다음 하위 요소에서 클릭 이벤트를 트리거합니다.

갱신하다

안 되네.브라우저는 기본 동작을 방지합니다.프로그래밍 방식으로 트리거될 수 있지만 기본 동작을 따르지 않습니다.

http://jsfiddle.net/4S4ET/ 에서 직접 확인하실 수 있습니다.

해킹일 수도 있지만 Firefox에서 세 번째 매개 변수인 'fullscreen=yes'를 지정하면 새 창이 열립니다.

예를들면,

<a href="#" onclick="window.open('MyPDF.pdf', '_blank', 'fullscreen=yes'); return false;">MyPDF</a>

실제로 브라우저 설정을 덮어쓰는 것 같습니다.

window.open(url)새 、 [ Tab ]이이 URL 。 JS는 JS를 합니다.

let a= document.createElement('a');
a.target= '_blank';
a.href= 'https://support.wwf.org.uk/';
a.click(); // we don't need to remove 'a' from DOM because we not add it

다음으로 작업 예를 나타냅니다(스택오버플로우 스니펫에서는 새로운 탭을 열 수 없습니다).

타겟으로 '_blank'를 사용하는 것을 제안하는 답변 카피가 많이 있습니다만, 이것은 효과가 없었습니다.Prakash가 지적했듯이, 그것은 브라우저에 달려있다.그러나 창에 위치 표시줄이 있어야 하는지 여부 등 브라우저에 특정 제안을 할 수 있습니다.

"탭과 같은 것"을 충분히 제안하면, Chrome에 대한 보다 구체적인 질문에 대한 Nico의 답변에 따라 탭을 얻을 수 있습니다.

window.open('http://www.stackoverflow.com', '_blank', 'toolbar=yes, location=yes, status=yes, menubar=yes, scrollbars=yes');

면책사항:이것은 만병통치약이 아니다.아직 사용자와 브라우저에 달려 있습니다.이제 적어도 원하는 창의 모양을 하나 더 지정했습니다.

Firefox(Mozilla) 확장 기능 내에서 새 탭을 여는 방법은 다음과 같습니다.

gBrowser.selectedTab = gBrowser.addTab("http://example.com");

이 방법은 위의 솔루션과 유사하지만 구현 방식이 다릅니다.

.social_icon -> CSS를 사용하는 클래스

 <div class="social_icon" id="SOME_ID" data-url="SOME_URL"></div>


 $('.social_icon').click(function(){

        var url = $(this).attr('data-url');
        var win = window.open(url, '_blank');  ///similar to above solution
        win.focus();
   });

이 을 통해 을 the this this this this을 url url url, URL에 추가합니다.<a> tag 해당 .tag.

Js
$('.myBtn').on('click', function(event) {
        event.preventDefault();
        $(this).attr('href',"http://someurl.com");
        $(this).trigger('click');
});
HTML
<a href="#" class="myBtn" target="_blank">Go</a>

"기존 웹 페이지 링크의 경우 새 페이지가 기존 웹 페이지와 동일한 웹 사이트의 일부일 경우 브라우저는 항상 새 탭에서 링크를 엽니다."라고 쓴 사람의 의견에 다소 동의합니다.적어도 이 "일반 규칙"은 Chrome, Firefox, Opera, IE, Safari, SeaMonkey 및 Konqueror에서 작동합니다.

어쨌든, 상대방이 제시한 것을 활용할 수 있는 덜 복잡한 방법이 있다.브라우저의 조작을 제어하는 웹 사이트(이하, 「thissite.com」)에 대해서, 「special page.htm」을 「EMPLY」로 해 주세요(서버로부터 데이터를 송신하는 시간이 오래 걸립니다).

 var wnd, URL;  //global variables

 //specifying "_blank" in window.open() is SUPPOSED to keep the new page from replacing the existing page
 wnd = window.open("http://www.thissite.com/specialpage.htm", "_blank"); //get reference to just-opened page
 //if the "general rule" above is true, a new tab should have been opened.
 URL = "http://www.someothersite.com/desiredpage.htm";  //ultimate destination
 setTimeout(gotoURL(),200);  //wait 1/5 of a second; give browser time to create tab/window for empty page


 function gotoURL()
 { wnd.open(URL, "_self");  //replace the blank page, in the tab, with the desired page
   wnd.focus();             //when browser not set to automatically show newly-opened page, this MAY work
 }

외부 링크(다른 사이트로 가는 링크)만 여는 경우 다음 JavaScript/jQuery 비트가 제대로 작동합니다.

$(function(){
    var hostname = window.location.hostname.replace('www.', '');
    $('a').each(function(){
        var link_host = $(this).attr('hostname').replace('www.', '');
        if (link_host !== hostname) {
            $(this).attr('target', '_blank');
        }
    });
});

언급URL : https://stackoverflow.com/questions/4907843/open-a-url-in-a-new-tab-and-not-a-new-window