由页面开关灯效果引起的跨iframe操作dom的思考

前两天需要在公司某网站页面头部加一个时下流行的页面开关灯效果,效果很简单，只要控制背景样式切换就行，但是现在的网站头不是个iframe，所以得在iframe里边操作iframe外边的dom。如果用原生的js，直接parent.document就可以获取到。考虑到原来网站引用了jQuery，所以想用jQuery的方法写，这个以前还真没写过，于是上google找答案…

jQuery子iframe区父级dom方法如下：$(‘ID’,window.parent.document)

子iframe操作父级页面dom的javascript代码如下:

1
2
3
4
5
6
7

$(".deng").toggle(	function(){
		$('body',window.parent.document).addClass("bg2");
		$(this).html('开灯');
	},	function(){
		$('body',window.parent.document).removeClass("bg2");
		$(this).html('关灯');
	})

项目应用实例：完美音乐在线

网址：http://radio.wanmei.com/

延伸阅读：父级页面控制子iframe的Dom

用到的方法主要是：$(“fu_iframeID”).contents().find(“ID”)

1
2
3
4
5

$("#fu").toggle(function(){
		$("#light").contents().find(".tools").addClass("bg1");
	},	function(){
		$("#light").contents().find(".tools").removeClass("bg1");
	})

看到上边iframe里边的变化了吧

相关博文

• 最简单的代码实现Tab
• 静态页面js传参
• 网页浮动工具条
• 仿校内textarea输入框字数限制效果
• jQuery滑动导航菜单

相关日志