jQuery不会改变背景
我的页面中有一个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中更改页面时，背景会更改为原始页面(而不是原来的正文)。我怎么才能解决这个问题？
回答 3
Stack Overflow用户
发布于 2013-09-05 12:43:19
在更改iframe的内容时，可以将iframe的前一个背景作为查询参数添加。
假设您的假设是：
- website.com/1
- website.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背景图像，即使您更改它。
当然，有一些前端方法可以做到这一点，比如在cookies或local storage中设置前面的背景图像，但我不会太深。
Stack Overflow用户
发布于 2013-09-05 13:35:52
这将在每次您更改iframe的内容时将您的背景设置为下拉列表中的选定选项，只要您的iframe的scr位于相同的域中。
$('iframe').load(function() {
$(this).contents().find('body').css('background-image', 'url(' + $("#bgselector").val() + ')');
});Stack Overflow用户
发布于 2013-09-05 13:42:54
已经有了一个公认的答案，那么，作为一个更多的参考.
如果您希望在主background上使用与body && iFrame相同的图像
你为什么不使用Transparent Iframe Background呢？
在主页中：
<iframe ... frameborder=0 ALLOWTRANSPARENCY="true"></iframe>在iframe..。
<body style="background-color:transparent">不用再担心iframe background了.
https://stackoverflow.com/questions/18636535
复制相似问题
腾讯云开发者
