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%的人还看了以下文章

  • 网页中的框架(详解)

    所谓框架便是网页画面分成几个框窗,同时取得多个 URL。 一、制作框架页面的步骤: 1.编写所有子框架页面2.编写主框架页面3.在主框架页面中设定子框架名称4.如果框架页面之间存在链接,在子框架中设定链接。 注意:框架页面是不含标签的 二、基本语法 <frameset> <frame src=”url”> <noframes&g…

    2020年4月11日
    15.7K0
  • 第15课:最后提示

    祝贺!你已经进入最后一课了! 我已经学到全部知识了? 如果你已经学完以上教程,恭喜你,你已经学到了很多关于HTML的知识,并且完全有能力创建自己的网站!不过,你所学到的只是基础知识,还有许多内容需要掌握。但是你已经为进一步学习打下了坚实的基础。 在最后这一课中,我们将给予一些最后提示: 首先,在HTML文档中,应保持正确的顺序与结构。令你的HTML文档具有良…

    2018年1月18日
    7.8K0
  • Dedecms的tplcache文件夹是什么,可以删除吗?

    tplcache是DeDeCMS里data目录下的模板缓存数据,时间久了就会积累成千上万的文件,而且会越来越大。dede模板缓存可以加快网页文件的生成速度,关闭的话,理论上说除了生成速度变慢之外没什么影响。tplcache文件夹是可以删除的。

    2023年3月19日
    4.4K0
  • js实现两个页面表单传值并接收

    网页制作时,需要两个页面之间传值,通过JS就可轻松实现。 js 实现两个页面表单传值并接收源码 A页面: <input type=”text” id=”txt”> <input type=”button” value=”测试” onclick=”test()”/> <SCRIPT LANGUAGE=”JavaScript”&gt…

    2019年7月10日
    5.6K0
  • CSS 实现水平、垂直居中布局代码大全

    CSS实现水平居中 若是行内元素,则直接给其父元素设置text-align: center即可 若是块级元素,则直接给该元素设置margin: 0 auto即可 若子元素包含浮动元素,则给父元素设置width:fit-content并且配合margin .parent { width: -webkit-fit-content; width: -moz-fit…

    2019年11月26日
    17.0K0
  • div/span水平顶部对齐,同一行div跟内容最多的div高度保持一样高

    一、两个div水平顶部对齐 两个div都设置display:inline-block;  并且右边的div增加样式vertical-align: top; 使得右边的div跟左边的div的顶部对齐。 <div id=’left’ style=”width:20%; display:inline-block”> </div> <d…

    2018年12月10日
    9.8K0

发表回复

登录后才能评论