jquery 으로 iframe 내용에 접근하기

iframe 내에 있는 항목등을 접근하여 값을 가져온다거나 값을 주어야 할 경우가 있다.

 

요즘은 jquery 를 많이 사용하다 보니 jquery 로 접근하여 사용하면 편리할거 같은대 iframe 을 selector 로 해도 동작하지 않았다.

 

찾아보다 다음과 같은 방법으로 접근해보니 정상동작하였다.

 

iframe 은 $('iframe[src="sample.htm"]') 이나  $('iframe[name="iframename"]') 등으로 선택하고

 

$('iframe[src="sample.htm"]').contents() 으로 iframe 내부에 접근한다.

 

그다음은 $('iframe[src="sample.htm"]').contents().find("body") 처럼 하면 된다.

 

나의 경우는 iframe 안에 또 iframe 의 css 를 바꾸고자 하여 다음과 같이 사용하였다.

 

$('iframe[src="sample.html"]').contents().find("iframe[name=sample_iframe]").contents().find('head link[href="/css/style.css"]').attr("href","/css/style2.css");

 

참고로 iframe 안에는 jquery 가 없다.

 

 

내가 사용한것은 네이버 에디터에 사용자 페이지의 css 를 적용하고자 함이었고 다음이 실제 사용한 내용이다.

PC 의 경우는 "/css/style.css" 를 미리 넣어 두었는대 모바일의 경우는 "/m/css/style.css" 로 바꾸려고 한것이다.

<script type="text/JavaScript">
var oEditors = [];
$(document).ready(function(){

 nhn.husky.EZCreator.createInIFrame({
  oAppRef: oEditors,
  elPlaceHolder: "c_content",
  sSkinURI: "/SE2/SmartEditor2Skin.html",
  htParams : {
   bUseToolbar : true,    // 툴바 사용 여부 (true:사용/ false:사용하지 않음)
   bUseVerticalResizer : true,  // 입력창 크기 조절바 사용 여부 (true:사용/ false:사용하지 않음)
   bUseModeChanger : true   // 모드 탭(Editor | HTML | TEXT) 사용 여부 (true:사용/ false:사용하지 않음)
   ,fOnBeforeUnload : function(){

   }
  }, //boolean
   fOnAppLoad : function(){
   //예제 코드
   //oEditors.getById["ir1"].exec("PASTE_HTML", ["로딩이 완료된 후에 본문에 삽입되는 text입니다."]);
   $('iframe[src="/SE2/SmartEditor2Skin.html"]').contents().find("iframe[name=se2_iframe]").contents().find('head link[href="/css/style.css"]').attr("href","/m/css/style.css");
  },
   fCreator: "createSEditor2"
 });
});
</script>