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)
江山如画的头像江山如画管理团队
上一篇 2020年1月1日 上午9:44
下一篇 2020年1月2日 下午3:20

99%的人还看了以下文章

  • 导航特效:jquery实现当前(活动)菜单样式变化

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

    2018年2月8日
    5.9K0
  • 如何在网页中输入多个连续的空格?

    默认状态下(输入法为半角状态),按空格键只能输入一个空格,要在文本之间插入多个连续的空格,可以使用以下几种方法: 1) 使用Ctrl+Shift+Space组合键。 2) 在中文全角状态下,使用空格键。 3) 选择【插入】→【HTML】→【特殊字符】命令下的“不换行空格”命令。 4) 直接在代码视图输入“&nbsp;”字符。

    2020年4月3日
    24.2K0
  • 注册表单验证常用js代码:用户名、密码、邮箱等字段验证

    <script language=”javascript”>   //验证是否为数字   function IsDigit(cCheck)       {       return ((‘0′<=cCheck) && (cCheck<=’9’));       }      //验证是否为英文字母        fun…

    2021年11月30日
    2.7K0
  • JS实现开关效果,可单选和组选

    JS实现的checkbox开关效果,可单个打开开关,也可一次关闭所有或打开所有开关。 <html> <head lang="en"> <meta charset="UTF-8"> <title>JS实现开关效果,可单选和组选|www.125jz.com</title…

    2018年7月29日
    7.0K0
  • 菜单或新闻列表最后一项的css处理小技巧:not(:last-of-type)

    网页开发时,导航菜单的最后一项或新闻列表的最后一项需要和前面其他项显示不同,如导航的最后一个菜单不再需要分隔符或右边的空白间距,新闻或文章列表的最后一项不需要底边距,列表一般都会有分割线,但是最后一个列表没有分割线等。 如文章列表如下: <ul class=’posts’> <li class=’post’> <h3>中国…

    2018年9月27日
    3.8K0
  • 怎么让一长串英文字符自动换行?

    长串英文字符之间没有空格,整串都显示在一行,撑破了div,甚至跑到屏幕外了,如何解决? <!doctype html> <html> <head> <meta charset=”utf-8″> <title>怎么让一长串英文字符自动换行?|www.125jz.com</title> &l…

    2019年11月20日
    5.7K0

发表回复

登录后才能评论