0

我的页面中有一个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。

当body背景改变时，我希望我的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 中更改页面时，背景会变成原来的背景（而不是正文）。我该如何解决这个问题？

4

3 回答 3

1

您可以在更改 iframe 的内容时添加之前的背景iframe作为查询参数。

假设您的 iframe 是：

  • 网站.com/1
  • 网站.com/2

当您将 iframe 的 url 从 更改website.com/1为 时website.com/2，将 url 设置为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 背景图像，您也可以保持它。

当然有一些前端的方法可以做到这一点，比如在cookiesor local storage，但我不会深入挖掘它。

于 2013-09-05T12:43:19.940 回答
0

已经有一个公认的答案，然后，作为进一步的参考......

background如果您想要与主body&&上的a 相同的图像，iFrame
为什么不使用Transparent Iframe Background??

在主页中：

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

在 iframe 中...

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

不用再担心iframe background了……

于 2013-09-05T13:42:54.060 回答
0

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

这就是为什么

$('iframe').load(function() {
    $(this).contents().find('body').css('background-image', 'url(' + $("#bgselector").val() + ')');  
});
于 2013-09-05T13:35:52.240 回答