Detect iframe events with JQuery

Question

I have this ajax code:

function send(obj) {
    var paket = {
        Url: obj
    }
    $.ajax({
        url: 'submit',
        type: 'POST',
        dataType: 'json',
        contentType: "application/json; charset=utf-8",
        data: JSON.stringify(paket),
        success: function (data) {
            var iframe = document.getElementById('frame');
            var html = data.msg;
            iframe.src = 'data:text/html;charset=utf-8,' + encodeURI(html);
            renderat = true;
            $('frame').ready(function () {
                console.log("laddad");
                test();
            });
        },
        error: function (data) {
        }
    })
}

Which works fine, it renders the html in my iframe:

<iframe width="600" height="600" id="frame"></iframe>

And then I use this to be able to pickup what elements are being used inside the iframe:

function test() {
    if (renderat == true) {
        console.log("0");
            var framen = document.getElementById('frame').contentWindow;
            $(framen).click(function (event) {
                alert($(event.target).val());
            });
    }
}

The problem is that it only runs up to console.log("0") and then nothing happens.. Why? I suspect the problem lies in that i cant figure out how to put this jquery code inside of $(document).ready?

Any suggestions? Thanks

Most likely the 'framen' is empty, dump that in console too - also see : http://stackoverflow.com/questions/1654017/how-to-expose-iframes-dom-using-jquery — Leon, Mar 04 '15 at 12:30

charlietfl · Answer 1 · 2015-03-04T12:36:31.193

0

ready() is not valid on iframe as a selector, use load event

$('#frame').on('load',function () {
     console.log("laddad");
     test();
});

edited Mar 04 '15 at 12:36

answered Mar 04 '15 at 12:16

charlietfl

170,828
13
121
150

user said it runs to '0' in the log - therefor the test is being called - so no need to use the load. – Leon Mar 04 '15 at 12:30
@Leon suggest you read up on how `ready()` works. It references the main page which is already in `ready` state – charlietfl Mar 04 '15 at 12:35
if you want to get events from the DOM it doesn't matter if all (or none) elements are loaded except for the DOM - TS wants to handle the click event on the DOM, so ready is good. Since the Console.Log('0') is called the ready event has fired. Or am I mistaking? – Leon Mar 04 '15 at 12:43
1

@Leon yes you are mistaken, OP is trying to access a new DOM inside iframe and you can't do that until it is loaded – charlietfl Mar 04 '15 at 12:44
Thank you for your response, the current code is as follows: $('#frame').on('load', function () { $(iframe).mouseover(function (event) { alert($(event.target)); }); }); It wont let me add .contentWindow - then it throws me an security error, even though everything is happening on my own computer. – user3581054 Mar 04 '15 at 12:58
that mouseover code won't access targets inside the iframe. – charlietfl Mar 04 '15 at 13:02
Has nothing to do with computer, has to do with domain and `same origin policy`. Is page being run on localhost? – charlietfl Mar 04 '15 at 13:03
Yes running on localhost – user3581054 Mar 04 '15 at 13:18

Detect iframe events with JQuery

1 Answers1