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

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实现

<html>
<head>
    <title>div+iframe替代frameset实现|www.125jz.com</title>
    <style>
        body
        {
            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>
  
<body> 
    <div>
        <iframe id="frameTop" src="http://www.baidu.com"></iframe>
    </div>
    <div>
        <iframe id="frameContentLeft" src="http://www.baidu.com"></iframe>
        <iframe id="frameContentRight" src="http://www.125jz.com"></iframe>
    </div>
</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的效果

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

代码:

Tips:You can change the code before run.

 

125jz网原创文章。发布者:江山如画,转载请注明出处:http://www.125jz.com/4586.html

(0)
江山如画的头像江山如画管理团队
3个超酷的CSS3图片动画特效:图片变圆角,放大,旋转
上一篇 2020年1月1日 上午9:44
python使用列表生成式生成列表 其元素为100以内所有能被3整除的数
下一篇 2020年1月2日 下午3:20

99%的人还看了以下文章

  • 实现网页全屏和退出全屏JS代码,多浏览器兼容

    实现网页全屏和退出全屏JS代码,兼容主流浏览器如:谷歌、火狐、360等。   <!DOCTYPE html> <html> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <t…

    2019年2月15日
    5.4K0
  • CSS图形绘制练习-最常见的40种形状和图形源码分享

    CSS图形绘制练习-最常见的40种形状和图形源码分享CSS图形绘制练习-最常见的40种形状和图形源码分享CSS图形绘制练习-最常见的40种形状和图形源码分享CSS图形绘制练习-最常见的40种形状和图形源码分享

     CSS3可以实现很多漂亮的图形,本文从互联网收集了最常见的40种形状和图形,现分享给大家。 包括圆形,椭圆形,三角形,倒三角形,左三角形,右三角形,菱形,梯形,长方形,正方形,圆环,平行四边形,五角星,六角星,五边形,六边形,八边形,心形,蛋形,无穷符号,消息提示框,钻石,八卦图,食豆人,扇形,月牙,顶左直角三角形,顶右直角三角形 ,底左直角三角形 ,底右…

    2020年2月22日 网页制作
    15.4K0
  • jquery全选和反选功能代码,兼容所有浏览器

    <!doctype html> <html> <head> <meta charset=”utf-8″> <title>jquery全选和反选功能代码,兼容所有浏览器|www.125jz.com</title> <script type=”text/javascript” src=…

    2019年11月1日
    5.4K0
  • 纯CSS制作热门文章排行,且前3名背景不同

    要制作文章排行前10、或评论排行榜1、2、3、4…,还要给前三名加上不同的背景,可以用纯css实现(用Ol,li),但通常网页制作中使用ul的比较多,因为不同浏览器对ol li有序列表默认自带的序号列表有着不同显示,容易引起浏览器兼容问题,所以遇到这样的有序排版布局,最简单是将序号切成背景图片! 使用ul li实现文章排行有序排版布局。   htm…

    2018年7月14日
    4.2K0
  • 美观简洁的bootstrap 表单验证代码

    美观简洁的bootstrap 表单验证代码,如上图所示,点击登录按钮,在输入框下方显示错误提示信息 <!DOCTYPE html> <html> <head> <meta charset=”utf-8″ /> <title>ipput</title> <!– 新 Bootstra…

    2020年2月9日
    9.4K0
  • 导航特效:jquery实现当前(活动)菜单样式变化

    用户点击导航或菜单上不同的栏目,被选中的导航栏目会变换样式,出现图片或背景颜色的变化,用于标识是否是当前栏目或活动选项。 本教程使用jquery实现导航菜单当前(活动)菜单样式变化,导航菜单模式用的是背景颜色,你可以换成背景图片以符合建站需要。 当前(活动)菜单样式变化实现原理 在html代码中给首页(默认选中)加上class名cur <a href=…

    2018年2月8日
    7.4K0

发表回复

登录后才能评论