Call function inside iFrame content

Question

I have the following in an html file (gallery.html) which creates a basic image gallery.

<div id="gallery">
    <!-- images are loaded into the container via the javascript function -->
</div>


 <script>
    function loadImages(images) {
        alert("Function Called");
        for (var i = 0; i < images.length; i++) {
            $('#gallery').append("<img class='slides' src='"+images[i]+"'/>");
        }
    }
</script>

I then want to be able to put it in an iFrame and call the function to load the Images.

For example I have tried this without success

<iframe src="gallery.html" width='400px' height="200px" onload='loadImages(['pic1.png','pic2.png'])'></iframe>

and

<iframe src="gallery.html" width='400px' height="200px" onload='this.contentDocument.loadImages(['pic1.png','pic2.png'])'></iframe>

Is there a way that I can call the function in this way (a one liner) via the iFrame element in HTML? This would mean then that I could just put this one line of code in where ever I wanted the gallery (with different images) on a website.

Thanks for looking!

possible duplicate of https://stackoverflow.com/questions/251420/invoking-javascript-code-in-an-iframe-from-the-parent-page?rq=1 — Christian, Aug 30 '17 at 13:37

score 2 · Accepted Answer · answered May 15 '15 at 15:45

2

You can access it through contentWindow:

<iframe src="gallery.html" onLoad="this.contentWindow.loadImages(['pic1.png','pic2.png'])"></iframe>

answered May 15 '15 at 15:45

James Thorpe

31,411
5
72
93

Boom! Solved it, annoyed I missed that. Thanks! – EagerMike May 15 '15 at 15:49
@jammycoder accept the anwer! edit: lol, i didnt realize that – May 15 '15 at 15:50
@CrisimIlNumenoreano he did it so quick I've gotta wait 4 minutes – EagerMike May 15 '15 at 15:51

Call function inside iFrame content

1 Answers1