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 相关文章推荐
详解CSS的border边框属性及其在CSS3中的新特性
May 10 HTML / CSS
HTML+CSS3 模仿Windows7 桌面效果
Jun 17 HTML / CSS
CSS3中31种选择器使用方法教程
Dec 05 HTML / CSS
CSS3实现滚动条动画效果代码分享
Aug 03 HTML / CSS
详解CSS3 rem(设置字体大小) 教程
Nov 21 HTML / CSS
html5使用canvas绘制文字特效
Dec 15 HTML / CSS
canvas 阴影和图形变换的示例代码
Jan 02 HTML / CSS
HTML5 input新增type属性color颜色拾取器的实例代码
Aug 27 HTML / CSS
html5 canvas 实现光线沿不规则路径运动
Apr 20 HTML / CSS
浅析图片上传及canvas压缩的流程
Jun 10 HTML / CSS
详解HTML5布局和HTML5标签
Oct 26 HTML / CSS
用position:sticky完美解决小程序吸顶问题的实现方法
Apr 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
DOTA2 无惧惊涛骇浪 昆卡大型水友攻略
2020/04/20 DOTA
PHP开发的一些注意点总结
2010/10/12 PHP
浅谈php正则表达式中的非贪婪模式匹配的使用
2014/11/25 PHP
PHP封装的字符串加密解密函数
2015/12/18 PHP
Windows Server 2008 R2和2012中PHP连接MySQL过慢的解决方法
2016/07/02 PHP
使用Apache的rewrite
2021/03/09 Servers
jQuery的.live()和.die() 使用介绍
2011/09/10 Javascript
Javascript图像处理思路及实现代码
2012/12/25 Javascript
使用coffeescript编写node.js项目的方法汇总
2015/08/05 Javascript
AngularJs定制样式插入到ueditor中的问题小结
2016/08/01 Javascript
JavaScript对象创建模式实例汇总
2016/10/03 Javascript
JavaScript使用FileReader实现图片上传预览效果
2020/03/27 Javascript
vue.js使用3DES加密的方法示例
2018/05/18 Javascript
vue+element-ui动态生成多级表头的方法
2018/08/28 Javascript
vue history 模式打包部署在域名的二级目录的配置指南
2019/07/02 Javascript
Vue 电商后台管理项目阶段性总结(推荐)
2020/08/22 Javascript
python实现根据月份和日期得到星座的方法
2015/03/27 Python
Django分页功能的实现代码详解
2019/07/29 Python
Python 解决OPEN读文件报错 ,路径以及r的问题
2019/12/19 Python
Python hashlib模块实例使用详解
2019/12/24 Python
pytorch 模拟关系拟合——回归实例
2020/01/14 Python
利用python画出AUC曲线的实例
2020/02/28 Python
pycharm Tab键设置成4个空格的操作
2021/02/26 Python
一款利用css3的鼠标经过动画显示详情特效的实例教程
2014/12/29 HTML / CSS
Lulu & Georgia官方网站:购买地毯、家具、抱枕、壁纸、床上用品等
2018/03/19 全球购物
英国汽车零件购物网站:GSF Car Parts
2019/05/23 全球购物
英国马莎百货印度官网:Marks & Spencer印度
2020/10/08 全球购物
自荐信格式范文
2013/10/07 职场文书
党支部公开承诺书
2014/03/28 职场文书
学习型党组织建设经验材料
2014/05/26 职场文书
信用卡工作证明模板
2014/09/14 职场文书
2014年精神文明工作总结
2014/12/23 职场文书
中班下学期幼儿评语
2014/12/30 职场文书
碧霞祠导游词
2015/02/09 职场文书
建国大业观后感600字
2015/06/01 职场文书
领导干部学习心得体会
2016/01/23 职场文书