How do I load the background image from another page?
I'm creating a page that loads content from other pages using jQuery like this:
$('#newPage').load('e开发者_开发问答xample.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,
-BenUpdate: 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.
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)
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
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.
Doesn't this line throw an error?
var pageBody = pageHTML.$('body');
There should be something like this:
var pageBody = $('body', pageHTML);
加载中,请稍侯......
精彩评论