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 border旋转时的动画应用
Jan 22 HTML / CSS
纯CSS3打造属于自己的“小黄人”
Mar 14 HTML / CSS
CSS3实现点击放大的动画实例代码
Feb 27 HTML / CSS
CSS3 仿微信聊天小气泡实例代码
Apr 05 HTML / CSS
你可能不熟练的十个前端HTML5经典面试题
Jul 03 HTML / CSS
只要五步 就可以用HTML5/CSS3快速制作便签贴特效(图)
Jun 04 HTML / CSS
开发人员所需要知道的HTML5性能分析面面观
Jul 05 HTML / CSS
HTML5到底会有什么发展?HTML5的前景展望
Jul 07 HTML / CSS
HTML5拖拽的简单实例
May 30 HTML / CSS
html5 postMessage解决跨域、跨窗口消息传递方案
Dec 20 HTML / CSS
CSS3 制作精美的定价表
Apr 06 HTML / CSS
table设置超出部分隐藏,鼠标移上去显示全部内容的方法
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中通过DirectoryIterator删除整个目录的方法
2015/03/13 PHP
老司机传授Ubuntu下Apache+PHP+MySQL环境搭建攻略
2016/03/20 PHP
PHP Smarty模版简单使用方法
2016/03/30 PHP
用JavaScript和注册表脚本实现右键收藏Web页选中文本
2007/01/28 Javascript
javascript引导程序
2008/10/26 Javascript
javascript 单例/单体模式(Singleton)
2011/04/07 Javascript
ASP.NET jQuery 实例14 在ASP.NET form中校验时间范围
2012/02/03 Javascript
javascript 图片裁剪技巧解读
2012/11/15 Javascript
JavaScript字符串对象charAt方法入门实例(用于取得指定位置的字符)
2014/10/17 Javascript
node.js中的buffer.Buffer.isBuffer方法使用说明
2014/12/14 Javascript
jQuery实现表格行上下移动和置顶效果
2015/06/05 Javascript
基于jQuery倾斜打开侧边栏菜单特效代码
2015/09/15 Javascript
JS快速实现移动端拼图游戏
2016/09/05 Javascript
jQuery插件imgAreaSelect基础讲解
2017/05/26 jQuery
vue打包后显示空白正确处理方法
2017/11/01 Javascript
AngularJS实现的生成随机数与猜数字大小功能示例
2017/12/25 Javascript
小程序绑定用户方案优化小结
2019/05/15 Javascript
Ajax获取node服务器数据的完整步骤
2020/09/20 Javascript
Python生成pdf文件的方法
2014/08/04 Python
跟老齐学Python之??碌某?? target=
2014/09/12 Python
对numpy和pandas中数组的合并和拆分详解
2018/04/11 Python
Python绘图Matplotlib之坐标轴及刻度总结
2019/06/28 Python
使用layui框架实现点击左侧导航切换右侧内容且右侧选项卡跟随变化的效果
2020/11/10 HTML / CSS
阿迪达斯西班牙官方网站:adidas西班牙
2016/07/21 全球购物
JINS眼镜官方网站:日本最大的眼镜邮购
2016/10/14 全球购物
瑜伽服装品牌:露露柠檬(lululemon athletica)
2017/06/04 全球购物
印尼旅游网站:via
2017/11/12 全球购物
最便宜促销价格订机票:Airpaz(总部设在印尼,支持中文)
2018/11/13 全球购物
美国价格实惠的在线眼镜网站:Zeelool
2020/12/25 全球购物
软件测试英文面试题
2012/10/14 面试题
高职助产应届生自荐信
2013/09/24 职场文书
简历上的自我评价怎么写
2014/01/28 职场文书
会走路的树教学反思
2014/02/20 职场文书
企业法人授权委托书
2014/09/25 职场文书
2015自愿离婚协议书范本
2015/01/28 职场文书
解决Pytorch dataloader时报错每个tensor维度不一样的问题
2021/05/28 Python