用Jquery实现在iframe中更换首页背景图片（皮肤）

来源：互联网发布：流量分析统计软件编辑：程序博客网时间：2024/06/08 15:39

先有一个主页A，一个iframe页B，B嵌套在A中，现要实现在B中点击按钮实现更换A的皮肤。

在B中要设置A的背景图片最重要的是获取A的页面节点，Jquery中获得A页面节点是：$(window.parent.document)

如果是要设置A的背景图片Jquery代码可以是这样：$(window.parent.document).find("body").css("background", "url(图片地址)"); 如果是要改变A的带有id为father的div背景图片Jquery代码可以是这样：$(window.parent.document).find("#father").css("background", "url(图片地址)");

具体演示代码如下:

A页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title></head><body>    one    <iframe width="100%" height="50" src="/B.html" style="border:0;"></iframe>    two    <div id="father" style="height:170px;">father</div></body></html>

B页面

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head>    <title></title>    <style type="text/css">    </style>    <script src="/js/jquery-1.7.2.js" type="text/javascript"></script>    <script type="text/javascript">        $(function () {            $("#change").click(function () {                $(window.parent.document).find("body").css("background", "url(http://img.my.csdn.net/uploads/201212/09/1355066621_2823.jpg)");            });        });    </script></head><body><input type="button" value="更换背景" id="change" /></body></html>

60site个人自定义网址导航http://www.60site.com