如何从另一个页面加载背景图像?

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

我正在创建一个页面，使用jQuery这样的jQuery加载其他页面的内容:

$('#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

谢谢,本

5 个解决方案

#1

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.

更新:请将背景图片更改为CSS: style="background-image: url(…)"我认为你现在尝试的方法不会达到背景属性。

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.

我从未见过通过Ajax请求获取完整的HTML结构，但只要它没有插入到DOM中，就应该没问题。

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.

如果发现HTML结构是问题所在，考虑动态创建iframe元素，将页面加载到其中，然后从那里获取backgroundImage属性。

#2

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生成jQuery对象时，它将忽略诸如HTML、head以及更重要的body等标记。例如，如果是你的例子。html页面包含以下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 :)

然后，从var pageHTML = $(数据)中生成的jQuery对象将基于div。为了获得body元素的属性，您需要处理数据作为字符串，您在这里需要:)

(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)

(你可以做一些忍者字符串替换，将数据中的和标签转换为divs，但是在字符串中进行regex搜索会更快、更稳定)

#3

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:

我在这里开始了另一个思路，希望我可以用另一种方式来做，我从Simen Echholt那里得到了一个可行的解决方案，为了让人们在这里搜索

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

为此，我拼凑了一个regex，它将搜索数据字符串变量(包含HTML)以获取body标记的背景属性。regex被从这里窃取并修改了一点。我还是regex的新手，所以我想它可以更流畅地完成，但是它仍然完成了工作
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

再次感谢!本

#4

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.

我认为问题是当你从另一个网站加载数据时你实际上只是加载HTML，而不是加载另一个DOM你可以找到属性比如背景。

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

至于实际解决你的问题，我不是很确定。

#5

Doesn't this line throw an error?

这行不行吗?

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

There should be something like this:

应该有这样的东西:

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

#1