js操作cookie实现后台管理系统全站样式切换

思路就是在主页面通过js来设置cookie，获取cookie，然后在iframe的子页面获取cookie值从而根据值用js获取link标签改变它的href属性来改变样式。

废话不多说，直接上代码。

首先是主页面的代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<script src="jquery-1.9.1.min.js"></script>
	<link rel="stylesheet" href="a.css">
    <input type="hidden" value="b">
</head>
<body onload="loadGetCookie()">
    <button class="huanfu">换肤</button>
    
    <iframe src="getCookie.html" class="hahaha" frameborder="0"></iframe>
    <iframe src="3.html" frameborder="0"></iframe>
	<script>
	    var inputval;
		$(function(){
			
			var username=document.cookie.split(";")[0].split("=")[1];
			//JS操作cookies方法!
			//写cookies
			function setCookie(name,value)
			{
				var Days = 30;
				var exp = new Date();
				exp.setTime(exp.getTime() + Days*24*60*60*1000);
				document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
			}

			function getCookie(name)
			{
				var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
				if(arr != null)
				return unescape(arr[2]);
				return null;
			}
			$(".huanfu").click(function(){
				if($("input").val()=="b"){
					$("input").val("a"); //预留变量为a
					setCookie("cookie","b.css"); //样式为b.css 即第二套样式
					setCookie("variable","a");  //把预留变量设为cookie保存起来
					var ysCss = getCookie("cookie"); 
					$("link").attr("href",ysCss);	
				}else{
					
					$("input").val("b");
					setCookie("cookie","a.css");
					setCookie("variable", "b");
					var ysCss = getCookie("cookie");
					$("link").attr("href",ysCss);	
				}
				$('.hahaha').attr('src', $('.hahaha').attr('src')); //刷新iframe子页面获取最新的页面cookie样式信息
			})	
		})
		function loadGetCookie(){
			function setCookie(name,value)
			{
				var Days = 30;
				var exp = new Date();
				exp.setTime(exp.getTime() + Days*24*60*60*1000);
				document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
			}
			function getCookie(name)
			{
				var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
				if(arr != null)
				return unescape(arr[2]);
				return null;
			}
			var ysCss = getCookie("variable"); //页面刷新时获取预留变量值的cookie值
            //alert(ysCss);
			if(ysCss == null){//如果预留变量值为null则使用默认样式  即a.css			
					setCookie("cookie","a.css");
					setCookie("variable", "b");
					var ysCssskin = getCookie("cookie");
					$("link").attr("href",ysCssskin);	
				}else{

					setCookie("cookie","b.css");
					var ysCssskin = getCookie("cookie");
					//alert(ysCssskin);
					$("link").attr("href",ysCssskin);
				}
			//刷新页面时获取预留变量的cookie值。这个变量值非常重要 是切换样式的关键 起承上启下的作用，当预留变量值为a时页面用的是b.css样式，当为b时用的是a.css样式
			if(ysCss=="a"){

				$("input").val("a");
			}else{
				$("input").val("b");
			}
		}

	</script>
</body>
</html>

html没多少代码就不讲了直接从js代码开始：

			//JS操作cookies方法!
                        var username=document.cookie.split(";")[0].split("=")[1];
			//设置cookie
			function setCookie(name,value)
			{
				var Days = 30;
				var exp = new Date();
				exp.setTime(exp.getTime() + Days*24*60*60*1000);
				document.cookie = name + "="+ escape (value) + ";expires=" + exp.toGMTString();
			}
                        //获取cookie
			function getCookie(name)
			{
				var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
				if(arr != null)
				return unescape(arr[2]);
				return null;
			}

这些不懂也没关系，只需要复制粘贴上了，还有删除cookie的代码就不贴了，当然感兴趣的可以自己去问度娘。接下来这一部分就比较重要了：

                       $(".huanfu").click(function(){
				if($("input").val()=="b"){
					$("input").val("a"); //预留变量为a
					setCookie("cookie","b.css"); //样式为b.css 即第二套样式
					setCookie("variable","a");  //把预留变量设为cookie保存起来
					var ysCss = getCookie("cookie"); 
					$("link").attr("href",ysCss);	
				}else{
					
					$("input").val("b");
					setCookie("cookie","a.css");
					setCookie("variable", "b");
					var ysCss = getCookie("cookie");
					$("link").attr("href",ysCss);	
				}
				$('.hahaha').attr('src', $('.hahaha').attr('src')); //刷新iframe子页面获取最新的页面cookie样式信息
			})

通过一个隐藏的input框的value值来进行样式的切换，其实就是通过value的值来判断再次点击按钮时改变的样式，这方法我一直屡试不爽。最后要注意点击换肤按钮后要使iframe子页面刷新，这样他才能从cookie中获取要更改的样式名称，否则还是显示默认的引入样式。接下来是iframe子页面里面的页面：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<link rel="stylesheet" href="a.css">
	<script src="jquery-1.9.1.min.js"></script>

</head>
<body>
    <h2>我是子页面</h2>
    <h2>我是子页面</h2>
    <h2>我是子页面</h2>
    <h2>我是子页面</h2>
    <script src="cookie.js"></script>
</body>
</html>

子页面的cookie.js页面：

	        function getCookie(name){
		    var arr = document.cookie.match(new RegExp("(^| )"+name+"=([^;]*)(;|$)"));
		    if(arr != null)
		    return unescape(arr[2]);
		    return null;
		}
	        var ysCss = getCookie("cookie");
		$("link").attr("href",ysCss);

其实和主页面的js差不多相同，只不过这个页面是iframe子页面的公共方法，哪个页面需要改变直接引入这个js文件就可以了，好了，大功告成~~第一次写博客，有不懂的地方或理解不清楚的地方请多多原谅~~~ 这格式好难写啊。

秒客网

js操作cookie实现后台管理系统全站样式切换

相关文章