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

例如我尝试过但没有成功

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