HTML5不支持frameset的两种解决方法


Posted in HTML / CSS onNovember 14, 2016

解决方法如下:

第一种

使用iframe,但是目前使用iframe的人已经越来越少了,而且iframe在不同浏览器之间还有不兼容的情况。而且我一些研发的人员,他们表示iframe窗口间传值似乎很麻烦。

第二种

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

所以个人更倾向于这种方法。

我一般是这样写的

$("#main").load("mainIndex.html",function(){

 });

对于页面,div+css可以实现frame的效果

<!DOCTYPE HTML>
<html>
<head>
<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>
<body>
    <div class="page">
        <div class="header">
            <div id="title">
                <h1>顶部</h1>
            </div>
        </div>
        <div class="MainContainer">
            <div class="sidebar">
            边栏
            </div>
            <div  id="main" class="main">
                内容
            </div>           
        </div>
    </div>
</body>
</html>

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作能带来一定的帮助,如果有疑问大家可以留言交流。

HTML / CSS 相关文章推荐
CSS3中动画属性transform、transition和animation属性的区别
Sep 25 HTML / CSS
css3绘制百度的小度熊
Oct 29 HTML / CSS
css3 2D图片转动样式可以扩充到Js当中
Apr 29 HTML / CSS
纯css3实现照片墙效果
Dec 26 HTML / CSS
CSS3制作Dropdown下拉菜单的方法
Jul 18 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
CSS3制作彩色进度条样式的代码示例分享
Jun 23 HTML / CSS
CSS3 创建网页动画实现弹跳球动效果
Oct 30 HTML / CSS
HTML5表格_动力节点Java学院整理
Jul 11 HTML / CSS
HTML5+WebSocket实现多文件同时上传的实例
Dec 29 HTML / CSS
处理HTML5新标签的浏览器兼容版问题
Mar 13 HTML / CSS
CSS精灵图的原理与使用方法介绍
Mar 17 HTML / CSS
html5 视频播放解决方案
Nov 06 #HTML / CSS
HTML5头部标签的一些常用信息小结
Oct 23 #HTML / CSS
解决canvas转base64/jpeg时透明区域变成黑色背景的方法
Oct 23 #HTML / CSS
HTML5页面音视频在微信和app下自动播放的实现方法
Oct 20 #HTML / CSS
浅谈html5标签css3的常用样式
Oct 20 #HTML / CSS
html5中的一些标签学习(心得)
Oct 18 #HTML / CSS
HTML5+CSS3实现机器猫
Oct 17 #HTML / CSS
You might like
Mysql数据库操作类( 1127版,提供源码下载 )
2010/12/02 PHP
mysql_num_rows VS COUNT 效率问题分析
2011/04/23 PHP
PHP CURL获取返回值的方法
2014/05/04 PHP
Codeigniter+PHPExcel实现导出数据到Excel文件
2014/06/12 PHP
了解jQuery技巧来提高你的代码(个人觉得那个jquery的手册很不错)
2012/02/10 Javascript
JavaScript实现页面5秒后自动跳转的方法
2015/04/16 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
jQuery往textarea中光标所在位置插入文本的方法
2015/06/26 Javascript
Ajax清除浏览器js、css、图片缓存的方法
2015/08/06 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
JS 判断某变量是否为某数组中的一个值的3种方法(总结)
2017/07/10 Javascript
基于VUE.JS的移动端框架Mint UI的使用
2017/10/11 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
2018/03/17 Javascript
JS实现的汉字与Unicode码相互转化功能分析
2018/05/25 Javascript
ES7之Async/await的使用详解
2019/03/28 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
微信小程序swiper组件实现抖音翻页切换视频功能的实例代码
2020/06/24 Javascript
javascript贪吃蛇游戏设计与实现
2020/09/17 Javascript
[03:02]辉夜杯主赛事第二日 每日之星
2015/12/27 DOTA
[51:44]2018DOTA2亚洲邀请赛 4.3 突围赛 Optic vs iG 第二场
2018/04/04 DOTA
浅谈python日志的配置文件路径问题
2018/04/28 Python
python调用tcpdump抓包过滤的方法
2018/07/18 Python
python GUI图形化编程wxpython的使用
2019/07/19 Python
Scrapy爬虫文件批量运行的实现
2020/09/30 Python
Html5新标签解释及用法
2012/02/17 HTML / CSS
全球才华横溢工匠的家居装饰、珠宝和礼物:NOVICA
2021/01/22 全球购物
指针和引用有什么区别
2013/01/13 面试题
SQL Server面试题
2013/04/04 面试题
既然说Ruby中一切都是对象,那么Ruby中类也是对象吗
2013/01/26 面试题
毕业生个人求职的自我评价
2013/10/28 职场文书
怎样填写就业意向
2014/04/02 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
奉献爱心演讲稿
2014/09/04 职场文书
红领巾心向党演讲稿
2014/09/10 职场文书
污水处理保证书
2015/05/09 职场文书
vue如何清除浏览器历史栈
2022/05/25 Vue.js