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中并调用该函数来加载图像。

例如，我试过这个没有成功

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

有没有办法可以通过HTML中的iFrame元素以这种方式调用函数（一个单行）？这意味着我可以将这一行代码放在我想要网站上的图库（具有不同图像）的地方。

感谢您的期待！

Answer 1

您可以通过contentWindow访问它：

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

在iFrame内容中调用函数

1 个答案: