development

HTML의 새 탭에서 링크를 여는 방법은 무엇입니까?

big-blog 2020. 3. 2. 13:12
반응형

HTML의 새 탭에서 링크를 여는 방법은 무엇입니까?


HTML 프로젝트를 진행 중이며 자바 스크립트없이 새 탭에서 링크를 여는 방법을 찾을 수 없습니다.

이미 <a href="http://www.WEBSITE_NAME.com"></a>동일한 탭에서 링크 여는 것을 알고 있습니다. 새로운 아이디어로 여는 방법에 대한 아이디어가 있습니까?


링크의 'target'속성을 다음으로 설정하십시오 _blank.

<a href="#" target="_blank" rel="noopener noreferrer">Link</a>

편집 : 다른 예를 보려면 여기를 참조하십시오 : http://www.w3schools.com/tags/att_a_target.asp

(참고 : 내가 이전에 제안 blank대신 _blank. GolezTrol가 지적했듯이, 그것은 이름을 참조 만하기 때문에, 사용 된 경우,이 새 탭을 열 수 있습니다 다음 링크를 다시 클릭하면 동일한 탭을 사용하기 때문에 그러나,이입니다 링크를 다시 눌러 동일한 탭에서 열 때 설정되고 사용되는 프레임 / 창의 a).

보안 고려 사항!

rel="noopener noreferrer"악의적 원래 탭을 수정할 수있는에서 새로 열린 탭을 방지하는 것입니다. 이 취약점에 대한 자세한 내용은 다음 리소스를 참조하십시오.


요구 사항에 따라 이들 중 하나를 사용하십시오.

링크 된 문서를 새 창이나 탭에서 엽니 다.

 <a href="xyz.html" target="_blank"> Link </a>

클릭 한 것과 동일한 프레임에서 링크 된 문서를 엽니 다 (기본값).

 <a href="xyz.html" target="_self"> Link </a>

부모 프레임에서 링크 된 문서를 엽니 다.

 <a href="xyz.html" target="_parent"> Link </a>

창의 전체 본문에서 링크 된 문서를 엽니 다.

 <a href="xyz.html" target="_top"> Link </a>

명명 된 프레임에서 링크 된 문서를 엽니 다.

 <a href="xyz.html" target="framename"> Link </a>

MDN 참조


매 링크마다 명령을 수행하는 대신 전체 사이트에 대해 명령을 한 번 수행하려는 경우. 웹 사이트 및 빙고의 헤드 내 에서이 장소를 사용해보십시오.

<head>
<title>your text</title>
<base target="_blank" rel="noopener noreferrer">
</head>

도움이 되었기를 바랍니다


사용 target="_blank":

<a href="http://www.example.com/" target="_blank" rel="noopener noreferrer">This will open in a new window!</a>

target='_blank' XHTML을 사용하지 않는 경우


태그의 "target"속성을 사용하여 _blank에 지정하십시오. 그건:

<a href="http://www.google.com" target="_blank" >Google in a New Tab or Window depending on the browser's capabilities</a>

사용시기 target='_blank':

HTML 버전 (일부 장치에서는 지원하지 않음) :

<a href="http://chriscoyier.net" target="_blank">This link will open in new window/tab</a>

모든 장치에 대한 JavaScript 버전 :

rel = "external"의 사용은 완벽하게 유효합니다

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript">
    $('a[rel="external"]').attr('target', '_blank');
</script>

Jquery의 경우 아래 중 하나를 시도해 볼 수 있습니다.

$("#content a[href^='http://']").attr("target","_blank");

브라우저 설정으로 새 창에서 열 수없는 경우 :

href = "google.com";
onclick="window.open (this.href, ''); return false";

target="_blank"속성이 작업을 수행합니다. rel="noopener noreferrer"잠재적 인 취약점을 해결하기 위해 추가 하는 것을 잊지 마십시오 . 자세한 내용은 https://dev.to/ben/the-targetblank-vulnerability-by-example

<a href="https://www.google.com/" target="_blank" rel="noopener noreferrer">Searcher</a>

당신이 사용할 수있는 <a href='url' target="_blank">name</a>

<a href='https://www.facebook.com/hackbalteamz' target="_blank">Facebook</a>


동일한 탭에서 기본값이 열립니다.

<a href="https://www.google.com/">Google.com </a>

새 탭에서 열립니다 :

<a href="https://www.google.com/" target="_blank">Google.com </a>

당신이 사용할 수있는 <a href="#" target="_blank">Your Text</a>이 도움이 희망을. 감사.


target = "_ blank"는 항상 클릭마다 새 탭을 열고 target = "tabName"은 새 탭을 열지 만 클릭마다 동일합니다.


당신이 사용할 수있는:

<a href="http://www.WEBSITE_NAME.com"  target="_blank"> Website</a>

그러나 위의 내용은 귀하의 사이트를 피싱 공격에 취약하게 만듭니다. 링크에 rel = "noopener noreferrer"를 추가하여 일부 브라우저에서 발생하지 않도록 할 수 있습니다. 이것을 추가하면 위의 예는 다음과 같습니다.

<a href="http://www.WEBSITE_NAME.com" rel="noopener noreferrer" target="_blank">Website.com</a> 

자세한 내용은 https://www.thesitewizard.com/html-tutorial/open-links-in-new-window-or-tab.shtml 을 확인하십시오.

참고 URL : https://stackoverflow.com/questions/17711146/how-to-open-link-in-new-tab-on-html



반응형