这段时间需要一个后台页面,要求实现最上面导航栏、左边菜单栏、右边内容栏,点击菜单改变内容,网上百度了一波,只发现一种方法,比较遗憾,本人不相信只有一种解决方案,所以记录一波供以后扩展
target属性解决方案
这个方案就是充分利用target属性的特性来解决,所谓target就是对应某个(内嵌)框架(个人理解,想有自己的体会百度),理所当然的是配和(内嵌)框架使用。目前我接触到(内嵌)框架只有frameset(框架集)、iframe(内嵌框架)。所以我接下来主要介绍target配合两种框架使用来实现内容跳转。
1 target和frameset使用
步骤一:定义页面分布
就是设置frameset里面有几个frame,怎么布局(这里我不详解,这是举个例子),相关代码index.html如下:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
// cols表示frame集合的各自宽度(第一个100,第二个剩余),其他属性就不说,自己学习
<frameset cols="100,*" frameborder="no" border="0" framespacing="0">
// 这里src里面的路径是相对路径(我当时文件的相对路径)
<frame src="WEB-INF/jsp/left.html" name="leftFrame" scrolling="No" noresize="noresize" id="leftFrame" title="leftFrame" />
<frame src="WEB-INF/jsp/main.html" name="mainFrame" id="mainFrame" title="mainFrame" />
</frameset>
</head>
<noframes>
<body>
</body>
</noframes>
</html>
步骤二:编辑frame的src,实现相关跳转:
相关代码如下:
// left.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<a href="main.html" target="mainFrame">go main</a>
<a href="main2.html" target="mainFrame">go main2</a>
</body>
</html>
// main.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>main</p>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<p>main2</p>
</body>
</html>
注:以上这个列子非常简单,但是也是非常经典的。步骤分两步只是便于理解,接触更多的相关知识的读者,感觉分一步都可以。
2 target配合iframe使用
步骤一:设置页面内部跳转的iframe(感觉命名有点别扭)
就是设置需要在页面哪部分实现页面内部跳转,相关代码如下:
// index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body>
<li><a href="./WEB-INF/jsp/A.html" target="con">跳转A</a></li><br/>
<li><a href="./WEB-INF/jsp/B.html" target="con">跳转B</a></li><br/>
// 这里就是实现跳转的的iframe
<iframe name="con" src="./WEB-INF/jsp/A.html"></iframe>
</body>
</html>
**步骤二:编辑iframe的src,同时编写页面跳转逻辑
相关代码如下:
// A.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body style="height: 100%;overflow: hidden;">
<h4>A页面</h4>
<button id="bt">传参</button>
<script src="../../js/jquery.min.3.40.js"></script>
<script type="text/javascript">
$(function(){
$('#bt').on('click', function(){
var name="跳转成功";
window.open('B.html?name='+name, 'con', null, false);
});
});
</script>
</body>
</html>
// B.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
</head>
<body style="height: 100%;overflow: hidden;">
<h4>B页面</h4>
<button id="bt">获取参数</button>
<script src="../../js/jquery.min.3.40.js"></script>
<script type="text/javascript">
$(function(){
var str=this.location.search;
var val1=str.split("name=");
var val2=val1[1];
//url解码
val2=decodeURI(val2);
$('#bt').on('click', function(){
alert(val2);
});
});
</script>
</body>
</html>
注:以上代码还实现了一个客户端与服务器交换数据。
总结
以上我讲的主要就是target配合两个(内嵌)框架实现页面跳转,至于跳转逻辑一笔带过,所以接下来简单的总结一下页面target配合(内嵌)框架的跳转逻辑(跳转方式多样,最常见的是window.location.href,自己百度)。但是跳转不是唯一的解决方案,target配合(内嵌)框架实现刷新也能解决(用jquery操作(内嵌)框架的src,实现更新)。