[책] 자바스크립트 코드 레시피 278 - 136일차

a 태그 ＿blank 의 부모창 조작 제한하기

• 안전하게 _blank 속성을 사용하고 싶을 때

구문

target="_blank"

설명

target="_blank" 속성을 가진 a 태그로 윈도우 창을 열었을 때, 해당 창에서 window.opener 를 사용해 부모창의 제어가 가능합니다. 하지만 어느 정도의 위험성을 내포하므로 rel="noopener" 를 사용해 부모창의 제어를 제한할 수 있습니다. _blank 속성의 a 태그를 자동으로 noopener 설정하는 샘플을 확인합니다.

실습

index.html

<ul>
  <li><a href="dummypage1.html" target="_blank">링크1</a></li>
  <li><a href="dummypage1.html">링크2</a></li>
  <li><a href="dummypage1.html" target="_self">링크3</a></li>
  <li><a href="dummypage1.html" target="_blank">링크4</a></li>
</ul>
<p><a href="dummypage5.html">링크5</a></p>

---

script.js

// a 요소 모두 가져오기
const aElementList = document.querySelectorAll('a');
// a 요소별 처리
aElementList.forEach((element) => {
  // a 태그에 target 속성이 없으면 return
  if (element.hasAttribute('target') === false) {
    console.log(element, '속성이 있다.');
    return;
  }
  // target이 _blank 속성이 아니면 return
  if (element.getAttribute('target') !== '_blank') {
    console.log(element, '속성이 있다.');
    return;
  }
});