ansaurus

Question

How do I load the background image from another page?

Answer 1

+1 A:

Update: please change your background image to CSS: style="background-image: url(...)" I think the way you are trying now is not going to reach the background attribute.

Old answer:

background is shorthand. Try

pageBody.attr("backgroundImage");

I've never seen a complete HTML structure being pulled through an Ajax request, but as long as it's not inserted into the DOM, it should be fine.

If it turns out the HTML structure is the problem, consider creating an iframe element on the fly, loading the page into that, and then fetching the backgroundImage property from there.

Pekka 2010-05-21 15:50:44

Hi Pekka, thanks for the speedy reply.Hmmm backgroundImage isn't doing it, its coming back 'undefined'.Is there an easy way to just search the string for the 'background=' part? Or am I going totally the wrong way about this?

bbeckford 2010-05-21 15:58:03

@bbeckford it could be that the HTML structure isn*t parsed, I don't know what happens when you pull a whole document. Can you do a `console.log(pageHTML)` and look at the result in firebug to make sure the HTML structure actually gets loaded?

Pekka 2010-05-21 16:00:04

I haven't got firefox/firebug installed atm.Doing alert(data) comes back with the complete html of the page.Doing alert(pageHTML) and alert(pageBody) both returns [object Object]

bbeckford 2010-05-21 16:07:58

@bbeckford see my update.

Pekka 2010-05-21 16:12:07

I can't change the way that page works as its generated by php on a system I've got nothing to do with :S Is there no way to do a straightforward search of the string?

bbeckford 2010-05-21 16:15:10

@bbeckford I'm sure there is using a regular expression. I'm not very good at those I'm afraid. Maybe asking a separate question asking for "how to extract a `background=` value from a string containing HTML in JavaScript" gets you there faster.

Pekka 2010-05-21 16:17:49

Ok I've asked that too. I'm surprised this hasn't come up before! Thanks for your help

bbeckford 2010-05-21 16:21:18

@bbeckford on second thought, this may have been come up before :D anyway, I bet you're going to get an answer either way, or a link to a duplicate.

Pekka 2010-05-21 16:22:12

Answer 2

A:

I think the problem is that when you are loading the data from the other site you are actually just loading the HTML, not loading another DOM to which you can do things like find attributes like background.

As to actually solving your problem, I'm not really sure.

Jade Robbins 2010-05-21 15:52:21

It struck me as odd at first, too, but he is at no point inserting the structure into the current document, so it *should* work.

Pekka 2010-05-21 15:53:13

Thanks Jade.Is there any other way you can think of doing it? Perhaps just searching the string?..

bbeckford 2010-05-21 15:59:24

I would follow Pekka's advice and start another thread, I'm not a pro regex'er either :D Good luck!

Jade Robbins 2010-05-21 16:45:51

Answer 3

A:

Doesn't this line throw an error?

var pageBody = pageHTML.$('body');

There should be something like this:

var pageBody = $('body', pageHTML);

Crozin 2010-05-21 15:57:33

That doesn't do it either :( Thanks Crozin

bbeckford 2010-05-21 16:02:58

Answer 4

A:

I guess

$.get('example.html', function(data) {
   var pageHTML = $(data);
   var pageBody = pageHTML.find('body');
   alert(pageBody.attr("background"));
});

should do it now :p

jAndy 2010-05-21 15:59:46

Nope that's not doing it :SThanks

bbeckford 2010-05-21 16:02:37

updated, try again :)

jAndy 2010-05-21 16:07:14

Nope, that's not doing it either, I'm getting 'undefined'

bbeckford 2010-05-21 16:09:45

is pageBody filled correctly?

jAndy 2010-05-21 16:12:03

How do I find out without firebug?When I do alert(pageBody) it comes back '[object Object]'

bbeckford 2010-05-21 16:17:25

console.log(pageBody)

jAndy 2010-05-21 16:19:41

Is that without firebug?

bbeckford 2010-05-21 16:22:04

Ok I did it in Chrome, looks like its not being filled correctly :S

bbeckford 2010-05-21 16:25:35

Answer 5

+1 A:

When you generate a jQuery object from HTML, it will ignore tags such as html, head and, more important, body . If, for example, your example.html page contained the following html:

<html>
    <body>
        <div>
            <p>Text</p>
        </div>
    </body>
</html>

then your jQuery object generated from doing var pageHTML = $(data) would be based on the div. To get the attribute of the body element, you'd have to deal with data as a string, which you asked for here :)

(Well, you could do some ninja string replacements and convert the <body> and <html> tags in data into e.g. divs, but doing a regex search through the string would be both faster and more stable)

Simen Echholt 2010-05-21 18:49:05

Answer 6

A:

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

bbeckford 2010-05-24 08:29:45

ansaurus

tags:

views:

answers:

How do I load the background image from another page?

related questions