H5不支持frameset的三种解决方案：div+iframe、include、jQuery的onload方法加载页面

相关文章推荐

打篮球的红酒 · 卓越而速朽的思想家--纪念卡尔·波普尔逝世1 ...· 1 周前 ·

潇洒的电梯 · 1230名优秀内地学子将迎来神仙湖畔新生活| ...· 3 周前 ·

刚失恋的投影仪 · 运动员技术等级查询范围_国家体育总局· 2 月前 ·

没读研的鸡蛋面 · 乔治·克里孟梭_百度百科· 1 年前 ·

腼腆的绿豆 · 领导信息· 1 年前 ·

frameset标签定义框架集，它用于组织多个窗口（框架）。每个框架存在一个独立的文档。

<frameset id="frame" frameborder="0" framespacing="0" rows="100,*" border="false" scrolling="yes">
<frame name="topframe" scrolling="auto" marginheight="0" marginwidth="0" src="header.jsp" noresize>
<frameset  framespacing="0" border="false" cols="200,*" frameborder="0" scrolling="yes">
   <frame name="leftFrame" scrolling="no" marginheight="0" marginwidth="0"src="index.jsp" noresize>
    <frame name="rightFrame" scrolling="auto"  src="rightFrame.jsp"marginheight="0" marginwidth="0">
</frameset>
</frameset>

在这前的网页制作中，特别是后台管理页面或教程类网站（左侧目录，右侧主内容区）中经常使用。

在 HTML 5 中不支持 <frameset></frameset> 标签。

使用 <frameset> 可能会带来session丢失等问题

H5不支持frameset的三种解决方案

一、div+iframe替代frameset实现

<title>div+iframe替代frameset实现|www.125jz.com</title> <style> margin: 0; padding: 0; border: 0; overflow: hidden; height: 100%; max-height: 100%; #frameTop position: absolute; top: 0; left: 0; height: 100px; width: 100%; overflow: hidden; vertical-align: middle; #frameContentLeft position: fixed; top: 100px; left: 0; height: 100%; width: 150px; overflow: hidden; vertical-align: top; background-color: #D2E6FA; #frameContentRight position: absolute; left: 150px; top: 100px; height: 100%; width: 100%; right: 0; bottom: 0; overflow: hidden; background: #fff; </style> </head> <iframe id="frameTop" src="http://www.baidu.com"></iframe> <iframe id="frameContentLeft" src="http://www.baidu.com"></iframe> <iframe id="frameContentRight" src="http://www.125jz.com"></iframe> </body> </html>

但是目前使用iframe的人已经越来越少了，而且iframe在不同浏览器之间还有不兼容的情况。而且iframe窗口间传值似乎很麻烦。

二、include替代frameset实现

不同后台技术都有自己的方法，比如 ASP 有 SSI，PHP 有 require、require_once 或 include 函数，JSP 也有 include 指令。

三、使用jQuery的onload方法替代frameset实现

使用jQuery的onload方法加载页面，不过这种方法跳转多个页面后，点击浏览器上方的后退前进是无效的，不过可以认为的添加一个返回按钮。

$("#main").load("mainIndex.html",function(){
对于页面，div+css可以实现frameset的效果
 <!DOCTYPE HTML>
<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;}
.content{padding:0 10px;}
</style>
</head>
    <div class="page">
        <div class="header">
            <div id="title">
                <h1>顶部</h1>
        <div class="MainContainer">
            <div class="sidebar">
            <div  id="main" class="main">
</body>
</html>
   Tips:You can change the code before run.
                                                        125jz网原创文章。发布者：江山如画，转载请注明出处：http://www.125jz.com/4586.html                          
                             赞 (0)