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中的元素过渡属性transition示例详解
Nov 30 HTML / CSS
细说CSS3中的选择符
Oct 17 HTML / CSS
css 省略号 css3让多余的字符串消失并附加省略号的实现代码
Feb 07 HTML / CSS
发现两个有趣的CSS3动画效果
Aug 14 HTML / CSS
利用CSS3 动画 绘画 圆形动态时钟
Mar 20 HTML / CSS
你不知道的5个HTML5新功能
Jun 28 HTML / CSS
html5自带表单验证体验优化及提示气泡修改功能
Sep 12 HTML / CSS
在html5的Canvas上绘制椭圆的几种方法总结
Jan 07 HTML / CSS
谷歌浏览器小字体处理方案即12px以下字体
Dec 17 HTML / CSS
鼠标滚轮事件和Mac触控板双指事件
Dec 23 HTML / CSS
深入理解margin塌陷和margin合并的解决方案
Jun 26 HTML / CSS
CSS3实现360度循环旋转功能
Feb 12 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内核(一)
2015/11/10 PHP
微信公众号判断用户是否已关注php代码解析
2016/06/24 PHP
针对多用户实现头像上传功能PHP代码 适用于登陆页面制作
2016/08/17 PHP
JavaScript严格模式禁用With语句的原因
2014/10/20 Javascript
JavaScript实现查找字符串中第一个不重复的字符
2014/12/29 Javascript
基于javascript实现图片懒加载
2016/01/05 Javascript
jQuery的deferred对象使用详解
2016/09/25 Javascript
JavaScript编写九九乘法表(两种任选)
2017/02/04 Javascript
node.js实现回调的方法示例
2017/03/01 Javascript
基于JavaScript实现滑动门效果
2017/03/16 Javascript
Angular使用Md5加密的解决方法
2017/09/16 Javascript
jsonp跨域及实现百度首页联想功能的方法
2018/08/30 Javascript
重学 JS:为啥 await 不能用在 forEach 中详解
2019/04/15 Javascript
JS中的算法与数据结构之链表(Linked-list)实例详解
2019/08/20 Javascript
Vue 使用beforeEach实现登录状态检查功能
2019/10/31 Javascript
总结Python编程中三条常用的技巧
2015/05/11 Python
Python学习入门之区块链详解
2017/07/25 Python
Python实现一个Git日志统计分析的小工具
2017/12/14 Python
python实现抽奖小程序
2020/04/15 Python
Pytorch卷积层手动初始化权值的实例
2019/08/17 Python
Python3常用内置方法代码实例
2019/11/18 Python
Python二次规划和线性规划使用实例
2019/12/09 Python
django 文件上传功能的相关实例代码(简单易懂)
2020/01/22 Python
Python基于numpy模块实现回归预测
2020/05/14 Python
python生成xml时规定dtd实例方法
2020/09/21 Python
一款简洁的纯css3代码实现的动画导航
2014/10/31 HTML / CSS
Nike台湾官方商店:Nike.com (TW)
2017/08/16 全球购物
Hotels.com香港酒店网:你的自由行酒店订房专家
2018/01/22 全球购物
华为的Java面试题
2014/03/07 面试题
Ajax主要包含了哪些技术
2014/06/12 面试题
应届生污水处理求职信
2013/11/06 职场文书
挂职思想汇报
2013/12/31 职场文书
《美丽的丹顶鹤》教学反思
2014/04/22 职场文书
区级文明单位申报材料
2014/05/15 职场文书
小学一年级语文教学反思
2016/03/03 职场文书
python自动化测试之Selenium详解
2022/03/13 Python