iframe에 내용 추가하기

iframe의 경우 되도록 사용하지 않는 것이 좋지만 다른 페이지에 해당하는 html이나 php 등을 직접 링크를 해서 바로 보여줄 수 있다는 점에서 편리하다.

iframe의 경우 다른 도메인에 해당하는 파일이라면 그 안의 내용을 마음대로 바꾸거나 혹은 수정하는 것이 불가능하기 때문에, 보통 광고를 제공할 때 사용을 한다.

그러면 같은 도메인 상의 문제에서는 어떨까? php와 같은 경우에는 include 계열의 함수나 require 계열의 함수를 사용하면 같은 서버에 있는 파일을 쉽게 추가를 할 수 있다. 그러나 html의 경우에는 같은 서버에 있는 파일을 그대로 추가하기 위해서는 iframe 태그를 사용할 수밖에 없다. 그리고 같은 도메인인 경우에는 소스코드를 위험하게만 작성하지 않는다면 보안상의 문제가 생기지 않기 때문에 이런 경우는 막아놓지 않았다.

iframe 태그로 추가된 html 파일에 내용을 덧붙이는 방법(즉 내용을 수정하는 방법)은 아래의 Javascript code를 이용하면 된다. 이 방법은 jQuery를 이용한 방법이기 때문에 이 코드를 사용하기 전에 jQuery 라이브러리를 불러와서 사용을 해야 한다.

<script> 
$("#iframe").ready(function() { 
   var add = '<script>alert("hello!");</scr'+'ipt>'; 
   var body = $("#iframe").contents().find("body"); 
   body.append(add); 
}); 
</script> 

여기서 add에 있는 부분의 내용을 변경하면 해당하는 내용을 id가 'iframe'인 iframe의 body tag에 추가를 해주는 코드이다. 참고로 여기에 '</scr'+'ipt>'로 표현한 이유는 이렇게 하지 않고 '</script>'로 표기를 하면 이것을 <script> 태그를 닫는 것으로 인식을 할 수가 있어서 이와 같이 표기를 하였다.