iframe 내부 접근

iframe의 이름을 다음과 같이 정의 했다고 하자.

<iframe id="s_content" name="s_frame" src=".....

자바스크립트로 iframe을 가져오는 방법은 다음과 같다.

document.getElementById("s_content");

혹은

window.frames["s_frame"];

여기까지는 모두가 알만하고, js를 공부해본 사람이라면 누구든지 쉽게 접근할수 있다.

하지만 브라우저간에 다른 구현으로 인해, 내부 document를 가져오는 방법이 다르다.

ie, ff계열..      : frame.contentWindow

safari, opera  : frame.contentDocument

매우 뷁스러운 상황이라 할 수 있다.

그래서 코드를 구현할때는 다음과 같이 하도록 한다.

<script type="text/javascript">

function getFrame() {

  var frm = document.getElementById("s_frame");

  if (frm == null) return;

  var fDoc = frm.contentWindow || frm.contentDocument;

  if (fDoc.document) {

    fDoc = fDoc.document;

  }

  //여기서부터 갖고 노는거닷!!

  fDoc.body.style.backgroundColor = "red";

}

</script>

당연히 아시겠지만 getFrame()함수를 실행하게 되면 iframe내부의 배경색깔이 빨간색으로 바뀌게 됩니다.