Problem with iframe reading it

Question

Is there a equivalent of jQuery live function inside prototype? I have a iframe which is dynamically loaded into dom, and I need to access elements inside iframe and I can't. I need to do something when certain element inside iframe is hovered, how can I do that with prototype or native js?

Answer 1

Assuming your iframeid is iframe_id and the link inside the iframe's id is iframe_link, heres a prototype script that will alert "hover" when the link inside the iframe is rolled over:

<script>
var $IFRAME = function (id){
    return $('iframe_id').contentWindow.document.getElementById(id);
}
function watch_iframe(){
    var x = $IFRAME('iframe_link_id');
    x.observe('mouseover', function(event) {
        alert('hover')
    });
}
window.setTimeout(watch_iframe,1000);//makes sure iframe is loaded before intiating the watch_iframe function
</script>

credit where it's due: http://stackoverflow.com/questions/2107502/what-is-the-way-to-access-iframes-element-using-prototype-method

Answer 2

Here is a DOM way, if your IFRAME is on the same domain:

In your parent page:

<iframe src="iframeContent.html"></iframe>
<script>
    function listen(elm){
        alert(elm.tagName + ' moused over');
    }
</script>

In your iframe content:

<div onmouseover="top.listen(this)">
    mouse over me!
</div>