jquery iframe 본문 셀렉터

Question

jquery를 사용하여 iframe 본문에 액세스하는 간단한 표현식이 있습니다. iframe의 id가 theframe이라고 가정합니다.

iframe에 이벤트 처리기를 제공하려고합니다. 예 :

$("#theframe").contents().find("body").click(function() { 
    alert("hello, you touched me~"); 
}); 

그러나이 코드는 IE에서 작동하지 않습니다.

어떤 다른 생각은 내가 ~

Answer 1

는 iframe 요소의 이름 속성을 부여하는 데 도움 . 이제 당신은 이런 식으로 참조 할 수 있습니다 :

window.name_of_iframe 

당신은 iframe이 jQuery를이 없을 수 있으므로, 표준 이송을 사용하는 것이 더 안전한 방법

iframe_body = window.name_of_iframe.document.getElementsByTagName("body")[0]; 

에게 있습니다 이것은 iframe 대응의 신체 요소가 될 것입니다. 그러나 호스트 페이지의 jQuery에서 사용할 수 있습니다.

$(window.name_of_iframe.document.getElementsByTagName("body")[0]); 

은 iframe의 body 요소에 대한 jQuery 래퍼입니다.

하면 iframe이로드 된 경우에만이 작업을 수행 할주의 :

$("iframe[name=name_of_iframe]").load(function() { 
    var iframe_body = window.name_of_iframe.document.getElementsByTagName("body")[0]; 
    $(iframe_body).click(function() { 
     alert("hello, you touched me~"); 
    }); 
}); 

---

UPDATE :는 IE에서 테스트를하고, 그것으로 오히려 starnge 행동이있다. 파이어 폭스에서 당신은 문서 준비 이벤트 안에 포장해야하지만, IE에서는 iframe 요소 바로 뒤에 있어야합니다. 이 버전은 IE와 Firefox에서도 작동합니다.

<iframe name="ifr" src="?if=1"></iframe> 
<script type="text/javascript"> 
var ifr_loaded = false; 
$("iframe").load(function() { 
    $(window.ifr.document.getElementsByTagName("body")[0]).click(function() { alert("s"); }); 
    ifr_loaded = true; 
}); 
$(function() { 
    if (!ifr_loaded) 
    { 
     $("iframe").load(function() { 
      $(window.ifr.document.getElementsByTagName("body")[0]).click(function() { alert("d"); }); 
     }); 
    } 
}); 
</script> 

---

업데이트 2 : 짧은 버전,하지만 당신은 자바 스크립트에서 iframe을의 소스를 지정해야한다는, 그 단점이 있지만 내가 노력 모든 브라우저에서 작동합니다.

<iframe name="ifr"></iframe> 
<script type="text/javascript"> 
$(function() { 
    $("iframe").load(function() { 
     $(window.ifr.document.getElementsByTagName("body")[0]).click(function() { alert("d"); }); 
    }).attr("src","/teszt/v/index.php?if=1"); 
}); 
</script> 

---

UPDATE 3 : 그리고 결국에 대한 더 간단한 방법 :

<script type="text/javascript"> 
function init_iframe(obj) { 
    $(obj.document.getElementsByTagName("body")[0]).click(function() { alert("d"); }); 
} 
</script> 
<iframe name="ifr" src="?if=1" onload="init_iframe(window.ifr);"></iframe>