본문 바로가기

Local Oriented/jQuery

jQuery, a 태그의 target 에 _blank 속성을 부여하여 iframe 안의 링크가 모두 새창으로 열리도록 하는 방법


본문을 iframe 으로 처리하는데,
본문에 a 태그를 이용한 링크가 있는 경우..
a 태그의 target 이 정의되어 있지 않다면 기본값인 _self 가 적용되어,
iframe 안에서 링크가 열리는데..
iframe 의 사이즈도 다시 조정해야 하고, iframe 안에서 링크 이전의 페이지로 되돌리기도 그렇고 해서..
이런 경우에는 a 태그의 target 에 _blank 를 설정하여 새창으로 링크가 열리는 것이 나은데 그 방법은..?

<iframe id="idIframe" ... onload="javascript:resetLink()"></iframe>

상기 코드에서 onload 에 "javascript:" 를 기술하는 이유는..
IE 에서는 필요없지만 다른 웹브라우저 특히 모바일 기기에서,
"javascript:" 를 기술하지 않으면 자바스크립트 함수가 실행되지 않기 때문인데.. 조만간 조치가 되겠지요..?

resetLink() 함수에는,
idIframe(iframe 의 id)의 contents() 를 부르고, find() 로 a 태그를 가져와서..
a 태그 각각의 target 속성을 체크하여 속성값이 없다면 "_blank" 를 넣어주면 되는 코드.
그래서 아래와 같이 작성했더니 ok.
function resetLink(){
  $('#idIframe').contents().find('a').each(function(){
    var $o = $(this);
    var s = $o.attr('target');
    if(s=='') $o.attr('target','_blank');
  });
}

그런데, a 태그의 href 에 자바스크립트가 들어가면,
target 에 _blank 를 넣을때 자바스크립트 함수가 실행되고 비어있는 새창이 열리는 문제가 발생..
그래서 속성 href 에 "javascript" 문자열이 들어가는지를 체크.

그랬더니, 또 누군가는 소문자로 "javascript" 라고 하지 않고 대소문자를 섞어 쓰든가 대문자로 기술하기도 해서..
href 의 문자열을 모두 소문자로 하여 체크.

href 에 기술되는 내용에 javascript 라는 명칭이 사용되기도 하네요. 디렉토리나 파일명으로.
그래서 indexOf('javascript')>-1 에서 ==0 으로 수식을 고칩니다.

href 에 무언가 기술할때 공백을 넣는 경우도 생기네요. 안좋은 코딩 방식이긴 한데, 실수로 그럴 수도 있공.. 그래서 trim()

그래도, a 태그의 onclick 에 자바스크립트 함수를 기술하면 또 비어있는 새창이 열리는 문제 발생.

그래서 결국은 아래와 같이 체크하여 일단, 완성. 또 다른 문제가 발생할 지는.. ㅠ.ㅜ
(파라미터로 id 를 사용하게 되는 상황도 고려)
function resetLink(id){
  $('#'+id).contents().find('a').each(function(){
   var $o = $(this);
   var s1 = $o.attr('target');
   var s2 = $o.attr('href');
   var s3 = $o.attr('onclick');
   var b1 = true, b2 = true, b3 = true; // true 는 target="_blank" 를 배정하는 조건
   if(s1 && s1!='') b1 = false; // target 에 무언가 기술되면 _blank 불가
   if(s2 && s2.toLowerCase().trim().indexOf('javascript')==0) b2 = false; // href 에 함수가 기술되면 _blank 불가
   if(s3) b3 = false; // onclick 이 기술되면 _blank 불가
   if(b1 && b2 && b3) $o.attr('target','_blank');
  });
}

a 태그에 onclick 이 기술되지 않으면, jQuery 에서 a 태그의 onclick 속성을 읽어올 때 null 값이 추출.

 
제약사항이 하나 더 있네요.. ^^.
웹브라우저가 Rendering 하는 Runtime 에서,
iframe 과 iframe 을 호출하는 쪽의 자바스크립트 코드가 읽혀지는 시점이 약간 달라질 수 있기 때문에..
iframe 안의 링크에 target="_blank" 가 적용되지 않고 오류가 발생할 수 있습니다.
따라서, 상기 resetLink() 함수는 iframe 위 쪽에서 정의되어야 합니다. ^^.