关于iframe刷新仍在当前页面而不跳转到首页

最新推荐文章于 2022-05-11 14:29:36 发布

原创最新推荐文章于 2022-05-11 14:29:36 发布 · 2.9k 阅读

2 ·

CC 4.0 BY-SA版权

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文介绍了一种通过JavaScript实现的菜单栏动态加载方法，该方法利用cookie缓存iframe节点ID，确保用户刷新页面时能保持在当前页面。同时，菜单项数据从数据库动态获取，实现了菜单栏的灵活配置。

菜单栏主要是两轮加载，但是只要活得nodeid就可以了。

菜单中的数据就是从数据库中获取的，不是写死的，对应的nodeid。

这个主要就是采用cookie缓存iframe的nodeid节点。

主要的代码如下：

$(document).ready(function() {
	var indexurl=window.location.href;
	if(indexurl.indexOf("#") > 0) {
		var strcookie=document.cookie;
		var menu_n1="";
		var menu_n2="";
		if (strcookie.length > 0) {
			var arrcookie=strcookie.split(";");
			for(var i=0; i<arrcookie.length; i++){
				var arrvalue=arrcookie[i].split("=");
				var keyname=arrvalue[0].trim();
				if(keyname == "menu_n1") {
					menu_n1=arrvalue[1].trim();
				}else if(keyname == "menu_n2") {
					menu_n2=arrvalue[1].trim();
				}
			}
		}
		init_menu1();
		change_menu(menu_n1, menu_n2);
	}else {
		// 第一次加载
		$("#contentframe").attr("src", "${ctx }/finedo/redirect/index");
	   	init_menu1();
	   	change_menu("${n1}", "${n2}");
	}
});

//data:跳转需要传递的参数，目标页面使用{param.index_transition_data}获取,参数使用^或*分隔
function change_menu(n1,n2,data){
	if(n1){
		menu_1_touch(n1, true);
		if(n2){
			menu_1_touch(n1,data);
		}
	}
}
function init_menu1(){	
    var userrightlist=$.parseJSON('${LOGINDOMAIN_KEY.userrightlist}');
    var arr = userrightlist;
    var j = arr.length;
    for(var i=0;i<j;i++){   
        if(arr[i].parentnodeid=="0"){
        	if("N10"==arr[i].nodeid){
            	$("#sy-nav").append('<li style=\'-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;\' id="li_'+arr[i].nodeid+'" ><a href="javascript:;" id="a_'+arr[i].nodeid+'" onclick="menu_1_touch(\''
       				   +arr[i].nodeid+'\', true)">'+arr[i].nodename+'</a>'
       				   +((arr[i].nodename=='首页')?('<div class="sy-menu" id="li_div_'+arr[i].nodeid+'" style="display: none;"></div>'):'')+'</li>');		   
            	console.log(arr[i].nodeid);
            	}else{
            		 $("#sy-nav").append('<li id="li_'+arr[i].nodeid+'"><a  target="contentframe" style="text-decoration:none;color:#FFFFFF;"  onclick="menu_1_touch(\''
             				   +arr[i].nodeid+'\', true)">'+arr[i].nodename+'</a>'+'<div class="sy-menu" id="li_div_'+arr[i].nodeid+'" style="display: none"></div></li>'); 
               		 init_menu2(arr[i].nodeid);	
            	}	
        	}  
        menu_1_touch("N10",false);
        finedo.message.hideWaiting();
    }
}
function init_menu2(nodeid){    
    var href="";
    var userrightlist=$.parseJSON('${LOGINDOMAIN_KEY.userrightlist}');
    var j = userrightlist.length;
    for(var i=0;i<j;i++){        
         if(userrightlist[i].parentnodeid==nodeid && userrightlist[i].isnavigation=='是'){
                 href=ctx+userrightlist[i].rightentry;
                $("#li_div_"+nodeid).append('<p><a href='+href+' target="contentframe" style="text-decoration:none;color:#FFFFFF;" onclick="menu_1_touch(\''
      				   +userrightlist[i].nodeid+'\', true)">'+userrightlist[i].nodename+'</a></p>');
            }                     
    }
    $("#li_"+nodeid).hover(function(){  
        $("#li_div_"+nodeid).show();  
    },function(){ 
        $("#li_div_"+nodeid).hide();
    }); 
	
} 
function menu_1_touch(nodeid,reloadflag){
	//激励当前页面的数据到cookie，解决刷新回到首页的问题
	document.cookie = "menu_n1="+nodeid;
	history.pushState({},"",window.location.pathname+"#"+nodeid);
	if(nodeid=='N10'){
		//初始化首页
		if(reloadflag){
			$("#contentframe").attr("src",ctx+"/finedo/redirect/index");
		}
		return ;
	}
	var userrightlist=$.parseJSON('${LOGINDOMAIN_KEY.userrightlist}');
	var arr = userrightlist;
	var j = arr.length;
	for(var i =0;i<j;i++){
		
		if(arr[i].nodeid==nodeid){
			$("#contentframe").attr("src",ctx+arr[i].rightentry);
		}	
	}
}

这样子刷新就可以直接在当前页面了。

html页面如下：

<body  >
<!---头部--->
<div class="head">
<div class="com-pad">
   
   <li><img src="${ctx}/syzw_service/include/images/logo.png" /></li>
	<li>		<ul class="sy-nav" style="z-index: 99;" id="sy-nav"></ul></li>
	<li style="float:right;"> <div class="user-info" style="width: 180px;" >
       <div class="userImg" style="float: left; margin-left: 10px;"><img src="${ctx}/syzw_service/include/images/user.png"> </div>
        <span style="display:inline:block; height:40px; line-height:40px;">${sessionScope.LOGINDOMAIN_KEY.sysuser.personname}</span>
        <a style="position: relative;display:block; top:-30px;z-index:999;"  href="${ctx }/finedo/auth/logout">
 			<img style="float:right; display:inline-block; width:30px; margin-left:10px; margin-top:-20px;" src="${ctx}/syzw_service/include/images/exit.png" >
  	 	</a></li>		
   </div>
   </div>
</div> 
<!---头部结束--->

<iframe class="content" src="" id="contentframe" name="contentframe"  frameborder="0" width="100%" scrolling="auto" marginheight="0" marginwidth="0" onLoad="setIframeHeight(this.id)" style="padding-top:60px;"></iframe>
<script type="text/javascript">
function getDocHeight(doc) {
	doc = doc || document;
	var body = doc.body, html = doc.documentElement;
	var height = Math.max( body.scrollHeight, body.offsetHeight, 
        html.clientHeight, html.scrollHeight, html.offsetHeight );
    return height;
}

function setIframeHeight(id) {
	var ifrm = document.getElementById(id);
	var doc = ifrm.contentDocument? ifrm.contentDocument: 
        ifrm.contentWindow.document;
    ifrm.style.visibility = 'hidden';
    ifrm.style.height = "10px"; 
    ifrm.style.height = getDocHeight( doc ) + 4 + "px";
    ifrm.style.visibility = 'visible';
}
</script>
</body>

这样就可以了。