Функция вызова внутри содержимого iFrame

Question

У меня есть следующее в html-файле (gallery.html), который создает базовую галерею изображений.

<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> 

Затем я хочу, чтобы иметь возможность поместить его в плавающем фрейме и вызвать функцию для загрузки изображений.

Например, я попытался это без успеха

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

и

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

Есть ли способ, что я могу вызвать функцию таким образом (один лайнер) через элемент IFrame в HTML? Это означало бы тогда, что я мог бы просто поставить эту одну строку кода, где бы я ни захотел, чтобы галерея (с разными изображениями) на веб-сайте.

Спасибо, что посмотрели!

Answer 1

Вы можете получить доступ к нему через contentWindow:

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