jQuery 로 iframe 다루기

iframe 접근하기

아래처럼 myiframe 의 Id를 가진 Iframe 이 있다고 가정하자.

<iframe id="myiframe"></iframe>

src 바꾸기

$("#myiframe").attr("src", "http://www.onstory.fun");

iframe 내의 문서 객체 접근

iframe 속의 문서에

<div id="myDiv"></div>

$("#myiframe").contents().find("#myDiv").html();

var fd = document.getElementById('ifrHitProduct').contentWindow;
fd.showMsg();

부모문서에 접근

$("#parent_id", parent.document)

부모문서의 다른 iframe 접근

$("#parent_id", parent.frames["frame_id"].document)

자동 iframe 길이 체크하기

function setSize(){
  $("#myIframe").height(500);
}

아래가 실제 코드입니다.

var resizeIframe = function (){
  $("#myIframe").load(function(){
    $(this).height($(this).contents().find('body')[0].scrollHeight);
  });
}
$(function(){
  resizeIframe();
});

<iframe src="width="1000" height="500" frameborder="0" name="myIframe" id="myIframe" scrolling="no"></iframe>  

setSize는 실제 iframe 크기를 초기화 시키는 작업을 합니다. iframe 내의 문서에서 parent.setSize()를 호출합니다.

만약 서브 도메인인경우는 parent와 child 에 각각 document.domain = 'shop-wiz.com'; 을 정의해서 사용하시면 됩니다.

iframe 내의 자바스크립트 호출

iframe 내의 자바스크립트 변수 호출

$("#myiframe").get(0).contentWindow.result
$("#myiframe")[0].contentWindow.result

iframe 내의 자바스크립트 함수 호출

$("#myiframe").get(0).contentWindow.myresult();

다른 방식

var $f = $("#myiframe");
$f[0].contentWindow.myresult();  //works
$f.get(0).contentWindow.myresult(); //works