一个iframe在父页中改变一个div的图片

我是一个绝对的新手，当涉及到jQuery和JavaScript，但我试图做的是有一个包含缩略图的iframe，点击后，将在我的父页面上更改div中的图片。一个iframe在父页中改变一个div的图片

来源

2014-09-24 ScottyNZ

使用postMessage功能，允许一个IFRAME及其容器

这只会对同一产地的iframe工作之间的通信。

来源

2014-09-24 02:51:45

假设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" />。

来源

2014-09-24 03:01:30

谢谢，这工作正如我所需要的，我仍然有点困惑的jquery，但我能够得到这个工作。谢谢 – ScottyNZ 2014-09-29 05:27:05

请找到下面的解决方案。

//假设在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"); 
    }); 
    });

来源

2014-09-24 05:11:08

一个iframe在父页中改变一个div的图片

回答

相关问题