Javascript trigger function when iframe has loaded

Question

I am creating an iFrame via an object instance, when the iFrame loads I need to trigger a method from the original object, and be able to retrieve the content of the iframe back in the object. At the moment "up" apparently does not exist.

function iFrame() {

var Id="1234";

var d = document.createElement('DIV');
d.innerHTML = '<iframe  id="'Id+'" name="'+Id+'" onload="up('+Id+');"></iframe>';

    document.body.appendChild(d);

    obj=this;

    var i = document.getElementById(this.frameId);
    i.up = (function(obj){obj.iFrameOnload()})(obj);

}

iFrame.prototype.iFrameOnload=function(id) {

d = document.getElementById(id).contentWindow.document;


alert(d.body.innerHTML);
}

What is your question exactly? Up to which point does your code run so far? — mavrosxristoforos
– mavrosxristoforos, Commented Oct 14, 2013 at 20:25

poke · Accepted Answer · 2013-10-14 20:35:36Z

1

Instead of putting plain HTML inside of the div, you should actually create that iframe using DOM directly. This gives you several benefits:

var frame = document.createElement('iframe');

// set id and name attributes directly (although you don’t actually need them)
frame.id = '1234';
frame.name = '1234';

// set frame source (you probably want to set this)
frame.src = '';

// register event listener for the `load` event
frame.addEventListener('load', function () {
    // event handler here
    var d = this.contentWindow.document;
    alert(d.body.innerHTML);
}, false);

document.body.appendChild(frame);

As you can see, there is no need to ask the DOM again to get the iframe element via an ID or something. You created it directly after all, so you already have a reference to it.

edited Oct 14, 2013 at 20:35

answered Oct 14, 2013 at 20:27

poke

392k80 gold badges596 silver badges632 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Guesser Over a year ago

I need the alert to occur within the original objects method iFrameOnload

poke Over a year ago

@user1209203 There is no need for that extra function. The event handler itself (as an anonymous function in my example) does its job. You can give it a name if you like and then just call frame.addEventListener('load', iframeOnLoadHandler, false); instead where iframeOnLoadHandler is a function defined elsewhere.

poke Over a year ago

Please show what you are trying to do. If you want to call the iFrameOnload which you added to your prototype (which you shouldn’t btw), then you could use function () { this.iFrameOnload(); } as the event handler. But your whole function does not really make sense: It shouldn’t be added to the prototype, and if you do it, you really shouldn’t look the object up in the document first. Just refer to it using this.

Guesser Over a year ago

It's a method so that I can overwrite the method or extend for different uses of the object.

poke Over a year ago

Why the downvote? Could you please explain yourself?

geevee · Accepted Answer · 2013-10-14 20:29:23Z

0

your code there is a little messed up. allow me suggest something else:

include jQuery:

<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>

and then:

<script type="text/javascript">
$(function(){
    // create the iframe
    var url = 'http://www.google.com';
    var iframe_html = '<iframe src="' + url + '" id="iframe"></iframe>';
    $('body').append(iframe_html);

    // bind load event
    $('#iframe').load(function(){
        // on load code here
    });

});
</script>

hope that helps

answered Oct 14, 2013 at 20:29

geevee

5,4715 gold badges33 silver badges50 bronze badges

Comments

Atle · Accepted Answer · 2013-10-14 20:31:39Z

0

You can create a global function up():

function up (iframe_element) {
    alert("In up() function");
}

And call it with the 'this' parameter

d.innerHTML = '<iframe  id="'Id+'" name="'+Id+'" onload="up(this);"></iframe>';

Full JS-code is in that case:

function up (iframe_element) {
    alert("In up() function");
}

function iFrame() {
    var Id="1234";

    var d = document.createElement('DIV');
    d.innerHTML = '<iframe  id="'Id+'" name="'+Id+'" onload="up(this);"></iframe>';

    document.body.appendChild(d);
}

answered Oct 14, 2013 at 20:31

Atle

1,87712 silver badges10 bronze badges

Collectives™ on Stack Overflow

Javascript trigger function when iframe has loaded

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related