Question

我的页面中有一个select框，它以这种方式显示：

<select id="bgselector" onchange="bg(this[this.selectedIndex].value);">
 <option value="0.png" id="btn1">1. Default skin</option>
 <option value="1.png" id="btn2">2. MK7 Collage</option>
 <option value="3.jpg" id="btn3">3. Full Darkness</option>
</select>

当我点击某个选项时（感谢bg();功能），页面背景会发生变化。顺便说一下，我体内还有一个iframe。

当身体背景发生变化时，我希望我的iframe也改变背景，所以我写了下面的代码：

$(function() {
    var iframe_body = $('iframe').contents().find('body');

    var set_bg = function(url) {
        $('iframe').contents().find('body').css('background-image', 'url(' + url + ')');
        $('iframe').contents().find('body').css('opacity', 1.0);
    }
    $('#bgselector').change(function() {
        set_bg($(this).val());
    });
     $('#btn1').click(function(){
        set_bg('http://mk7vrlist.altervista.org/backgrounds/0.png');
    });
    $('#btn2').click(function(){
        set_bg('http://mk7vrlist.altervista.org/backgrounds/1.png');
        $("body").css('opacity', 1.0);
    });
    $('#btn3').click(function(){
        set_bg('http://mk7vrlist.altervista.org/backgrounds/3.jpg');
        $("body").css('opacity', 0.9);
    });
});

使用上面的jQuery，当我更改我的身体背景时，我的iframe中页面的背景会发生变化。

问题在于，当我在iframe中更改页面时，背景会变为原始页面（而不是正文中的页面）。我怎么能解决这个问题？

Answer 1

更改iframe的内容时，您可以将iframe的先前背景添加为查询参数。

假设你的iframe是：

website.com/1
website.com/2

当您将iframe的网址从website.com/1更改为website.com/2时，请将网址设为website.com/2?bg=xxx.png，然后您可以使用服务器端工作或前端工作来处理后台问题

<强>更新

当您更改iframe的背景时，首先获取iframe的当前背景

var bg = $('iframe').contents().find('body').css('background-image')

然后您将新的src设置为iframe元素

$('selector_to_your_iframe').attr('src', 'your_new_iframe_src' + '?bg=' + bg)

然后您可以在处理your_new_iframe_src

时在脚本中设置背景图像

//PHP Code
<html>
<head>
</head>
if(isset($_GET['bg'])){
    echo "<body style='background-image:url({$_GET['bg']}) no-repeat center;'>";
}
else{
    echo "<body>"
}
//contiunes to process the rest of webpage

通过这种方式，即使您更改了iframe背景图像，也可以保留它。

当然有一些前端方法可以做到这一点，例如在cookies或local storage中设置上一张背景图片，但我不会深入挖掘它。

Answer 2

只要您的iframe的scr位于同一个域下，每当您更改iframe的内容时，这会将您的背景设置为下拉列表中的所选选项。

Here is why

$('iframe').load(function() {
    $(this).contents().find('body').css('background-image', 'url(' + $("#bgselector").val() + ')');  
});

Answer 3

已经有一个已接受的答案，那么，就像一个笨拙的参考......

如果您想在主background＆amp;＆amp;上显示与body相同的图片iFrame
你为什么不用Transparent Iframe Background ??

在主页面中：

<iframe ... frameborder=0 ALLOWTRANSPARENCY="true"></iframe>

在iframe中......

<body style="background-color:transparent">

无需再担心iframe background ......

jQuery不会改变iframe背景

3 个答案: