CODEWITHSUNDEEP
javascriptjqueryhtml
Alberto Rossi
Alberto Rossi

Reputation: 1800

Change iFrame background with jQuery

I am using this code because I need to save the background I select from a select field called rds. The function saves a cookie too, so everytime the page is loaded, I can see the background I chose.

The problem is on the line that contains $('dado'), where 'dado' is the name of my iframe.

var setBackground = function(bgImg) {
    $.cookie('bgImg', bgImg, { expires: 720 });
    $('body').css('background-image', 'url(http://mk7vrlist.altervista.org/backgrounds/' + bgImg + ')');
    $('dado').contents().find('body').css('background-image', 'url(http://mk7vrlist.altervista.org/backgrounds/' + bgImg + ')');
}

$(function() { 
    $('#rds').change(function() {
        setBackground($(this).val());
    });
    setBackground($.cookie('bgImg'));
});

With the code aboove I can change and save the background of my body but the background of the page loaded on the iframe doesn't.

<iframe id="dado" src="http://mk7vrlist.altervista.org/link.html" width="100%" height="840px" frameBorder="0">
  Your browser doesn't load the iframes.
</iframe>

I am always loading pages hosted on my server. What can I do?

Upvotes: 0

Views: 1321

Answers (1)

Prashant Kankhara
Prashant Kankhara

Reputation: 1588

To target the tag with its 'id' you should use '#'. replace the below code with yours and check.

$('#dado').contents().find('body').css('background-image', 'url(http://mk7vrlist.altervista.org/backgrounds/' + bgImg + ')');

source :http://api.jquery.com/id-selector/

Upvotes: 2

Related Questions