Question

I’m creating a page that loads content from other pages using jQuery like this:

$('#newPage').load('example.html' + ' #pageContent', function() {
    loadComplete();         
});

That all works fine.

Now what I want to do is change the background image of the current page to the background image of the page I’m loading from.

This is what I’m doing now but I can’t for the life of me get it to work:

$.get('example.html', function(data) {

    var pageHTML = $(data);
    var pageBody = pageHTML.$('body');
    alert(pageBody.attr("background"));

});

What am I doing wrong??

Thanks,
-Ben

Answer 1

Thanks to all of you for your replies.

I started another thread here in hopes that I could do it a different way and I got a working solution from Simen Echholt, for the sake of people searching here it is:

I patched together a regex to do this,
which will search the data string
variable (containing the HTML) for the
background attribute of the body tag.
The regex is stolen from here and
modified a bit. I’m still new to
regex, so I guess it can be done more
fluently, but it still gets the job
done

var data = /* your html */;
var regex = /body.*background=["']?((?:.(?!["']?\s+(?:\S+)=|[>"']))+.)["']?/;
var result = regex.exec(data);
if (result.length > 1) {
    var background = result[1];
    alert(background);
}
else {
    //no match
}

If you used that answer please vote him up over here!

Thanks again!
-Ben