一个 iframe 更改父页面中 div 中的图片答案

【问题标题】：an iframe changing a picture in a div in the parent page一个 iframe 更改父页面中 div 中的图片
【发布时间】：2014-09-24 02:49:02
【问题描述】：

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

【问题讨论】：

标签： javascript jquery html image parent

【解决方案1】：

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

这仅适用于同源 iframe。

【讨论】：

【解决方案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" />.

【讨论】：

谢谢，这完全符合我的需要，我仍然对 jquery 有点困惑，但我能够让它工作。谢谢你

【解决方案3】：

请找到以下解决方案。

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

 $(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");
    });
  });

【讨论】：