一個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的圖片

回答

相關問題