Question

对于jQuery和JavaScript，我是一个绝对的新手，但我试图做的是有一个包含缩略图的iframe，当点击它时，会在我的父页面上更改div中的图片

Answer 1

使用允许iframe与其容器之间通信的postMessage函数

这仅适用于相同的原始iframe。

Answer 2

假设iframe与父网页的域名相同，您可以使用JavaScript的parent对象访问iframe的DOM和全局JavaScript的父级。

因此，在iframe中，您的代码可能如下所示：

$("img").on("click", function() {
 parent.document.getElementById("myPictureID").style.backgroundImage = "some-image.jpg";
});

您必须修改图像以某种方式从缩略图中获取它，可能作为数据属性。 <img class="thumbnail" data-image="someBiggerImage.jpg" />。

Answer 3

请找到以下解决方案。

//假设iFrame中的img并且您想要更改主页面的图片。

 $(document).ready(function(){
     $("#img").on("click", function() {
     window.parent.$("#myPictureID").css("background", "url(/images/r-srchbg_white.png) no-repeat");
    });
  });

//假设iFrame中的img并且您想要更改iframe中的图片。

  $(document).ready(function(){
     $("#img").on("click", function() {
   $("#myPictureID").css("background", "url(/images/r-srchbg_white.png) no-repeat");
    });
  });

iframe更改父页面中div的图片

3 个答案: