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

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

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

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

    2020年2月22日 网页制作
    15.7K0
  • Zoho Docs-在网页中嵌入PPT的最佳方案(个人版5G免费)

    Zoho Docs-在网页中嵌入PPT的最佳方案(个人版5G免费)Zoho Docs-在网页中嵌入PPT的最佳方案(个人版5G免费)Zoho Docs-在网页中嵌入PPT的最佳方案(个人版5G免费)Zoho Docs-在网页中嵌入PPT的最佳方案(个人版5G免费)

    Zoho WorkDrive – 全面的在线共享文档工具 在125建站网上想嵌入PPT,分享给大家 ,并且可以播放。 我思考了三种方法: 是在Zoho Docs上操作; 是PPT以图片的形式保存(动画效果没有了),直接轮播; 是自己手写动画+轮播,达到PPT播放效果(用express.js来实现)比较复杂,并且对小白站长不适用。 很自信的要自己手…

    2023年1月16日 网页制作
    2.0K0
  • 跟永哥学HTML5(5):正确使用HTML5的nav和figure

    这节课就给大家讲解常见的HTML5标签错误使用写法,帮助大家理解并学会正确使用HTML5的nav和figure。 1、不要把所有列表式的链接放在nav里 随着HTML5引入了 30个新元素,我们在构造语义化和结构化的标签时的选择也变得有些不慎重。也就是说,我们不应该滥用超语义化的元素。不幸的是,nav就是这样一个被滥用的例子。 nav元素的规范描述如下: n…

    2018年2月3日
    7.0K0
  • 一句代码给图片加倒影-CSS3

    本文使用纯CSS代码给图片加倒影,CSS代码 : img { -webkit-box-reflect: below 0px -webkit-gradient(linear, left top, left bottom, from(transparent), to(rgba(250, 250, 250, 0.1))); } 效果如下图所示: 完整代码: &lt…

    2019年8月18日
    7.8K0
  • css布局基础:行内元素、块级元素练习

    主要知识点: 1、理解什么是行内元素?什么是块级元素? 2、知道块级元素能够设置宽高,行内元素不可设置宽高(替换元素可以)。 3、掌握display属性的使用。 4、掌握css伪类选择器的使用。 扩展: 1、nth-child()选择器 选择其父元素的第n个子元素。 效果图: 参考: <nav> <ul> <li><…

    2020年4月4日
    14.0K0
  • 页面编码为UTF-8的项目中servlet中文显示乱码的解决方法

    servlet中文显示乱码:
    1、servlet中输出中文字符
    2、servlet接收表单传值并显示,表单字段含中文。

    网页制作 2020年2月23日
    9.0K0

发表回复

登录后才能评论