CODEWITHSUNDEEP
javascriptjqueryhtmliframe
Alberto Rossi
Alberto Rossi

Reputation: 1800

jQuery doesn't change iframe background

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?

Upvotes: 0

Views: 1915

Answers (3)

gmo
gmo

Reputation: 9010

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

Upvotes: 0

Mx.
Mx.

Reputation: 3665

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

Upvotes: 0

jasonslyvia
jasonslyvia

Reputation: 2535

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.

Upvotes: 1

Related Questions