jQuery doesn't change iframe background

Question

I have a select box in my page and it looks in this way:

<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>

When I click an option (thanks to the bg(); function) the background of the page changes. By the way there is also an iframe inside my body.

When the body background changes, I want that my iframe changes the background too, so I wrote the following code:

$(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);
    });
});

With the jQuery above, when I change the background of my body, the background of the page in my iframe changes.

The problem is that when I change the page in the iframe, the background changes into the original one (instead of the same of the body). How could I fix this?

is the changed page still under your domain ? Why not set the bg again when changing the page ? — Mx., Sep 05 '13 at 13:18

jasonslyvia · Accepted Answer · 2013-09-05T13:04:42.813

1

You can add the previous background of the iframe as a query parameter when you change the iframe's content.

Assume your iframes are:

website.com/1
website.com/2

when you change your iframe's url from website.com/1 to website.com/2, make the url to website.com/2?bg=xxx.png, you can then process the background issue use either sever side effort or front-end side effort.

Update

When you're changing your iframe's background, first get the current background of your iframe

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

then you set a new src to your iframe element

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

then you can set the background image in your script when processing 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

In this manner, you can maintain the iframe background image even you change it.

Of course there is some front-end way to do this, like set the previous background image in cookies or local storage, but I won't dig it too deep.

edited Sep 05 '13 at 13:04

answered Sep 05 '13 at 12:43

jasonslyvia

2,529
1
24
33

Could you make an example with the code? I am new with jQuery. If yes I'll +1 and accept. – Alberto Rossi Sep 05 '13 at 12:49
you can only do this if you add code to the external site. if its not your site this will be a problem. – Mx. Sep 05 '13 at 13:17
@Max Please note that _With the jQuery above, when I change the background of my body, the background of the page in my iframe changes._ – jasonslyvia Sep 05 '13 at 13:19
@jasonslyvia we still dont know to what page he changes the scr of his iframe. – Mx. Sep 05 '13 at 13:21
I change using urls of mk7vrlist.altervista.org. I'm using webpages inside my website – Alberto Rossi Sep 05 '13 at 13:22

score 0 · Answer 2 · edited May 23 '17 at 11:56

0

This will set your background to the selected option in your dropdown everytime you change the contents of the iframe as long as your iframe's scr is under the same domain.

Here is why

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

edited May 23 '17 at 11:56

Community

1
1

answered Sep 05 '13 at 13:35

Mx.

3,588
2
25
33

score 0 · Answer 3 · answered Sep 05 '13 at 13:42

Already has an accepted answer, then, just as a furder reference...

If you want the same image as a background on the main body && iFrame
Why don't you use a Transparent Iframe Background??

In the main page:

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

In the iframe...

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

no need to worry about iframe backgroundany more...

jQuery doesn't change iframe background

3 Answers3