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实现表单验证效果(非常不错)
Jan 18 HTML / CSS
css3实现波纹特效、H5实现动态波浪效果
Jan 31 HTML / CSS
纯CSS3实现带动画效果导航菜单无需js
Sep 27 HTML / CSS
使用css3和jquery实现可伸缩搜索框
Feb 12 HTML / CSS
一款纯css3实现的非常实用的鼠标悬停特效演示
Nov 05 HTML / CSS
CSS3实现可关闭的下拉手风琴菜单效果
Aug 31 HTML / CSS
CSS3 RGBA色彩模式使用实例讲解
Apr 26 HTML / CSS
图解CSS3制作圆环形进度条的实例教程
May 26 HTML / CSS
阻止移动设备(手机、pad)浏览器双击放大网页的方法
Jun 03 HTML / CSS
HTML5中的拖放实现详解
Aug 23 HTML / CSS
POST提交数据常见的四种方式
Jan 18 HTML / CSS
详解CSS3浏览器兼容
Dec 24 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
小文件php+SQLite存储方案
2010/09/04 PHP
Jquery乱码的一次解决过程 图解教程
2010/02/20 Javascript
DWZ刷新dialog解决方法
2013/03/03 Javascript
jQuery bxCarousel实现图片滚动切换效果示例代码
2013/05/15 Javascript
jQuery 和 CSS 的文本特效插件集锦
2014/12/12 Javascript
javascript实现滑动解锁功能
2014/12/31 Javascript
js+HTML5实现canvas多种颜色渐变效果的方法
2015/06/05 Javascript
JavaScript人脸识别技术及脸部识别JavaScript类库Tracking.js
2015/09/14 Javascript
JS+Canvas绘制时钟效果
2020/08/20 Javascript
JavaScript中windows.open()、windows.close()方法详解
2016/07/28 Javascript
js事件源window.event.srcElement兼容性写法(详解)
2016/11/25 Javascript
jQuery将表单序列化成一个Object对象的实例
2016/11/29 Javascript
jQuery手指滑动轮播效果
2016/12/22 Javascript
JavaScript中的toString()和toLocaleString()方法的区别
2017/02/15 Javascript
微信小程序tabbar不显示解决办法
2017/06/08 Javascript
vue中axios的封装问题(简易版拦截,get,post)
2018/06/15 Javascript
vue router导航守卫(router.beforeEach())的使用详解
2019/04/19 Javascript
Vue.js + Nuxt.js 项目中使用 Vee-validate 表单校验
2019/04/22 Javascript
vue子路由跳转实现tab选项卡
2019/07/24 Javascript
javascript使用canvas实现饼状图效果
2020/09/08 Javascript
js实现随机圆与矩形功能
2020/10/29 Javascript
[39:07]LGD vs VP 2018国际邀请赛淘汰赛BO3 第二场 8.21
2018/08/22 DOTA
Python编程修改MP3文件名称的方法
2017/04/19 Python
Python面向对象特殊成员
2017/04/24 Python
python中类和实例如何绑定属性与方法示例详解
2017/08/18 Python
解决已经安装requests,却依然提示No module named requests问题
2018/05/18 Python
解决Python下json.loads()中文字符出错的问题
2018/12/19 Python
对Python中class和instance以及self的用法详解
2019/06/26 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
Tensorflow 多线程与多进程数据加载实例
2020/02/05 Python
浅谈移动端网页图片预加载方案
2018/11/05 HTML / CSS
高中毕业的自我鉴定
2013/12/09 职场文书
感恩节红领巾广播稿
2014/02/11 职场文书
二年级学生评语大全
2014/04/23 职场文书
2014年超市工作总结
2014/11/19 职场文书
MySql存储过程之逻辑判断和条件控制
2021/05/26 MySQL