Use Mootools to select element within iframe content?

Question

Is there a way I can use Mootools selectors to select element(s) within iframe content?

$('#myIframe input').addEvent('focus', function() {
    // Do something
});

Thank you in advance!

Answer 1

If the iFrame is in the same domain and you are using Mootools inside it you can try:

$('myIframe').contentDocument.getElements('input').addEvent(

Example

Otherwise try this:

$('myIframe').contentDocument.querySelector('input').addEventListener(

Example

---

Edit:

If you want to catch the load event and then add the focus listener you could use:

var iframe = new IFrame({
    src: '/RN95f/3/show',
    styles: {
        border: '2px solid #ccf'
    },
    events: {
        load: function () {
            alert('The iframe has finished loading.');
            this.contentDocument.getElements('input').addEvent('focus', function () {
                // Do something
                alert('focus on input detected!');
                console.log(this);
            });
        }
    }
});
$(document.body).adopt(iframe);

Example

Answer 2

Sergio's answer is correct, thank you Sergio for your reply! However to get that to work, I needed to ensure iframe content was loaded before it would find input elements...

$('myIframe').onload = function() {
    $('myIframe').contentDocument.getElements('input').addEvent('focus', function() {
        // Do something
    });
};