如何从其他页面加载背景图像?

时间:2010-05-21 15:48:11

标签: jquery html ajax

我正在创建一个页面,使用jQuery从其他页面加载内容,如下所示:

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

一切正常。

现在我要做的是将当前页面的背景图像更改为我正在加载的页面的背景图像。

这就是我现在正在做的事情,但我不能为我的生活让它发挥作用:

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

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

});

我做错了什么?

谢谢,
-ben

5 个答案:

答案 0 :(得分:1)

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

旧回答:

background是简写。尝试

pageBody.attr("backgroundImage");

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

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

答案 1 :(得分:1)

当您从HTML生成jQuery对象时,它将忽略htmlhead以及更重要的 body 等标记。例如,如果您的example.html页面包含以下html:

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

然后,执行var pageHTML = $(data)生成的jQuery对象将基于 div 。要获取body元素的属性,您必须将data作为字符串处理,您要求here :)

(好吧,你可以做一些忍者字符串替换,并将<body>中的<html>data标记转换为例如div,但是进行正则表达式搜索通过字符串将更快,更稳定)

答案 2 :(得分:1)

感谢大家的回复。

我开始了另一个帖子here,希望我能以不同的方式做到这一点,我从working solution得到了Simen Echholt,为了在这里搜索的人是:

  

我拼凑了一个正则表达式,   这将搜索数据字符串   变量(包含HTML)   body标签的background属性。   正则表达式从这里被盗   修改了一下。我还是新手   正则表达式,所以我想它可以做得更多   流利,但它仍然得到了工作   完成

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
}

如果您使用了该答案,请通过here投票给他!

再次感谢!
-ben

答案 3 :(得分:0)

我认为问题在于,当您从其他网站加载数据时,实际上只是加载HTML,而不是加载另一个DOM,您可以执行诸如查找背景之类的属性。

至于实际解决你的问题,我不太确定。

答案 4 :(得分:0)

这行不会引发错误吗?

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

应该是这样的:

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