H5中框架页面

H5已经不支持frameset了,要实现框架页面有两种方法:

  1. 使用iframe，但是iframe在不同浏览器之间还有不兼容的情况,而且iframe窗口间传值似乎很麻烦。
  2. 使用jQuery的onload方法加载页面，不过这种方法跳转多个页面后，点击浏览器上方的后退前进是无效的，不过可以人为的添加一个返回按钮(推荐使用这种方法)。
$("#main").load("mainIndex.html",function(){

 });

对于页面，div+css可以实现frame的效果

<!DOCTYPE HTML>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>div+css实现frameset效果</title>
<style type="text/css">
.header {
	border-bottom: 1px solid #ccc;
	margin-bottom: 5px;
}

.MainContainer {
	min-width: 960px;
	max-width: 1600px;
}

.sidebar {
	width: 180px;
	float: left;
	margin-right: -180px;
	border-right: 1px solid #ccc;
	min-height: 500px;
	padding: 5px;
}

.main {
	float: left;
	margin-left: 200px;
	padding: 5px;
}

</style>
</head>
<body>
	<div class="page">
		<div class="header">
			<div id="title">
				<h1>顶部</h1>
			</div>
		</div>
		<div class="MainContainer">
			<div class="sidebar">边栏</div>
			<div id="main" class="main">内容</div>
		</div>
	</div>
</body>
</html>
posted @ 2020-03-04 16:52  人生如忘川  阅读(503)  评论(0)    收藏  举报